Every common flexbox property, grouped by where it applies: the container and the item. Each row pairs the property with its common values and what it does.
Flexbox lays elements out in one dimension: a row or a column. Set display: flex on the parent and it becomes the flex container; its direct children become flex items. The container properties control distribution along the main axis and the cross axis; the item properties control how an individual item grows, shrinks, or aligns itself. Pick flexbox for one-dimensional bars, rows, and centring.
Reference table · 13 entries
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Turn the element into a flex container.
row | column | row-reverse | column-reverse
Set the main axis the items flow along.
flex-start | center | space-between | space-around | space-evenly
Distribute items along the main axis.
stretch | center | flex-start | flex-end | baseline
Align items along the cross axis.
flex-start | center | stretch | space-between
Align wrapped rows when there is extra space on the cross axis.
nowrap | wrap | wrap-reverse
Let items wrap onto new lines instead of shrinking.
0.5rem | 8px 16px
Space between items, horizontally and vertically.
Item
0 | 1 | 2
How much free space the item absorbs relative to its siblings.
0 | 1
How much the item shrinks when there is not enough space.
auto | 200px | 50%
The starting size before free space is shared.
1 | 1 0 auto | 0 0 200px
Shorthand for grow shrink basis.
auto | center | flex-start | flex-end | stretch
Override the container's align-items for one item.