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
1st Div
2nd Div
3rd Div