Frow Shortcuts

Combos

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

Rows
class="frow" // The default (identical to .justify-center)

1st Div

2nd Div

3rd Div

class="frow row-center" // Similar to the default/.justify-center but also aligns items vertically

1st Div

2nd Div

3rd Div

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

1st Div

2nd Div

3rd Div

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

1st Div

2nd Div

3rd Div

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

1st Div

2nd Div

3rd Div

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

1st Div

2nd Div

3rd Div

class="frow row-evenly" // Similar to .justify-evenly but also aligns 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" // This is the default behaviour (identical to .frow)

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

class="frow justify-evenly"

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

class="frow content-evenly" // 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