Flexbox Classes
Bellow is a Demonstration of How the QuickCSS Flexbox Class Works
Back
flex-direction: row (default)
Items are laid out in a row (left to right)
1
2
3
flex-direction: row-reverse
Items are laid out in a row (right to left)
1
2
3
flex-direction: column
Items are laid out in a column (top to bottom)
1
2
3
flex-direction: column-reverse
Items are laid out in a column (bottom to top)
1
2
3
flex-wrap: wrap
Items wrap to multiple lines when needed
1 (100px)
2 (100px)
3 (100px)
4 (100px)
flex-wrap: wrap-reverse
Items wrap to multiple lines in reverse order
1 (100px)
2 (100px)
3 (100px)
4 (100px)
flex-wrap: nowrap (default)
Items stay on one line (may overflow)
1 (100px)
2 (100px)
3 (100px)
4 (100px)
flex: 1
Items grow and shrink equally, starting from equal basis
flex-1
flex-1
flex-1
flex: auto
Items grow and shrink based on content, starting from content size
Short
Medium length text
This is a much longer piece of content
flex: initial
Items shrink but don't grow, starting from content size
Short
Medium length text
This is a much longer piece of content
flex: none
Items don't grow or shrink, stay at content size
Short
Medium length text
This is a much longer piece of content
Mixed flex values
Combination of different flex values
flex-1
flex-auto
flex-initial
flex-none