All Tools VerseFlexbox is the CSS layout model for arranging items in a row or column, with control over spacing, alignment, and wrapping. This cheat sheet lists the container and item properties with their values.
Container (parent)
| Property | Values / what it does |
|---|---|
display: flex |
Makes the element a flex container |
flex-direction |
row | row-reverse | column | column-reverse |
flex-wrap |
nowrap | wrap | wrap-reverse |
justify-content |
Main axis: flex-start | center | space-between | space-around | space-evenly |
align-items |
Cross axis: stretch | flex-start | center | flex-end | baseline |
align-content |
Wrapped lines: flex-start | center | space-between | stretch |
gap |
Space between items, e.g. gap: 12px |
Items (children)
| Property | Values / what it does |
|---|---|
flex-grow |
How much an item grows; 0 means do not grow |
flex-shrink |
How much an item shrinks; 0 means do not shrink |
flex-basis |
The starting size before growing or shrinking |
flex |
Shorthand, e.g. flex: 1 means grow to fill |
align-self |
Override align-items for one item |
order |
Reorder an item; lower comes first |
Frequently Asked Questions
What is CSS Flexbox?
Flexbox is a one-dimensional layout system that lays out items in a row or a column and distributes space and alignment between them.
What is the difference between justify-content and align-items?
Justify-content aligns items along the main axis, the direction the items flow. Align-items aligns them along the cross axis, perpendicular to that.
When should I use Flexbox versus Grid?
Use Flexbox for one-dimensional layouts, a single row or column. Use Grid when you need rows and columns together in two dimensions.
How do I center something with Flexbox?
Set the container to display flex, then justify-content center and align-items center to center on both axes.
Build layouts visually with our free CSS Flexbox Generator and CSS Grid Generator.