Frow Shortcuts

Combos

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

Rows
class="frow row-center" // This is the default, class not typically needed

1st Div

2nd Div

3rd Div

class="frow row-start"

1st Div

2nd Div

3rd Div

class="frow row-end"

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

Important Note: As tempting as it seems, do not combine the .centered classes with any of the other combos. Achieve the result you are looking for by instead using the display:flex classes below.

Every display:flex Property Included

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

Flex-Direction
class="frow direction-row"

1st Div

2nd Div

3rd Div

class="frow direction-reverse"

1st Div

2nd Div

3rd Div

class="frow direction-column"

1st Div

2nd Div

3rd Div

class="frow direction-column-reverse"

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

Forms

Frow is from Cody Sherman via Beg.in