Frow Shortcuts

Combos

Frow has predefined shortcut classes to turn CSS display:flex property combinations into standard configurations.

Rows
class="frow row-center" // Similar to justify-center but also centers items vertically

1st Div

2nd Div

3rd Div

class="frow row-start" // Similar to justify-start but also centers items vertically

1st Div

2nd Div

3rd Div

class="frow row-end" // Similar to justify-end but also centers items vertically

1st Div

2nd Div

3rd Div

class="frow row-between" // Similar to justify-between but also centers items vertically

1st Div

2nd Div

3rd Div

class="frow row-around" // Similar to justify-around but also centers items vertically

1st Div

2nd Div

3rd Div

Columns
class="frow column-center"

1st Div

2nd Div

3rd Div

class="frow column-start"

1st Div

2nd Div

3rd Div

class="frow column-end"

1st Div

2nd Div

3rd Div

Centered Vertically and Horizontally
class="frow centered" // Adds height:100% too

1st Div

2nd Div

3rd Div

class="frow centered-column" // Adds height:100% too

1st Div

2nd Div

3rd Div

Every display:flex Property Included

All of the various display:flex properties are just a class away.

Flex-Direction
class="frow direction-row" // This can also be based on screen size, see: Responsive Design

1st Div

2nd Div

3rd Div

class="frow direction-reverse" // This can also be based on screen size, see: Responsive Design

1st Div

2nd Div

3rd Div

class="frow direction-column" // This can also be based on screen size, see: Responsive Design

1st Div

2nd Div

3rd Div

class="frow direction-column-reverse" // This can also be based on screen size, see: Responsive Design

1st Div

2nd Div

3rd Div

Justify-Content
class="frow justify-start"

1st Div

2nd Div

3rd Div

class="frow justify-end"

1st Div

2nd Div

3rd Div

class="frow justify-center"

1st Div

2nd Div

3rd Div

class="frow justify-between"

1st Div

2nd Div

3rd Div

class="frow justify-around"

1st Div

2nd Div

3rd Div

Align-Items
class="frow items-start"

1st Div

2nd Div

3rd Div

class="frow items-end"

1st Div

2nd Div

3rd Div

class="frow items-center"

1st Div

2nd Div

3rd Div

class="frow items-stretch"

1st Div

2nd Div

3rd Div

class="frow items-baseline" // Aligns by the first line of text's baseline.

1st Div

2nd Div

3rd Div

Align-Content
class="frow content-start" // Only works when a single .frow wraps to multiple rows

1st Div

2nd Div

3rd Div

4th Div

5th Div

class="frow content-end" // Only works when a single .frow wraps to multiple rows

1st Div

2nd Div

3rd Div

4th Div

5th Div

class="frow content-center" // Only works when a single .frow wraps to multiple rows

1st Div

2nd Div

3rd Div

4th Div

5th Div

class="frow content-between" // Only works when a single .frow wraps to multiple rows

1st Div

2nd Div

3rd Div

4th Div

5th Div

class="frow content-around" // Only works when a single .frow wraps to multiple rows

1st Div

2nd Div

3rd Div

4th Div

5th Div

Flex-Wrap
class="frow wrap" // This is the default, class not typically needed

1st Div

2nd Div

3rd Div

4th Div

5th Div

6th Div

class="frow wrap-reverse"

1st Div

2nd Div

3rd Div

4th Div

5th Div

6th Div

class="frow nowrap" // This essentially nullifies the .col-* system

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-4

Inline Flex
class="frow inline" // Switches the .frow from display:flex to display:inline-flex
Inline Span Text

1st Div

2nd Div

3rd Div

More Inline Span Text
Forms

Frow is from Cody Sherman via Beg.in