.row { display: flex; }Children become flex items on one line.
CSS Flexbox cheat sheet
Flexbox lays items out along one axis. Container properties control the group; item properties control individual children. Toggle the live demo to see each value.
18 entries
Container
flex-direction: row | row-reverse | column | column-reverse;Main axis direction.
flex-wrap: nowrap | wrap | wrap-reverse;Allow items to wrap onto new lines.
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;Distribution along the main axis.
align-items: stretch | flex-start | center | flex-end | baseline;Alignment on the cross axis.
align-content: flex-start | center | space-between | stretch;Spacing between wrapped lines.
gap: 16px; row-gap: 8px; column-gap: 24px;Space between items (no margin hacks).
Items
flex: 1;Shorthand for flex: 1 1 0 — grow and share space equally.
flex: 0 0 240px;Fixed 240px: no grow, no shrink.
flex-grow: 2; flex-shrink: 0; flex-basis: 30%;Longhand properties.
align-self: center;Override align-items for one item.
order: -1;Visual order (does not change tab order).
margin-left: auto;Push an item (and those after it) to the far end.
min-width: 0;Let an item shrink below its content width (fixes overflow).
Recipes
.center { display: flex; justify-content: center; align-items: center; }Center anything both ways.
.nav { display: flex; gap: 12px; } .nav .spacer { margin-left: auto; }Logo left, links right.
.page { display: flex; flex-direction: column; min-height: 100dvh; } main { flex: 1; }Sticky footer.
.cards { display: flex; flex-wrap: wrap; gap: 16px; } .cards > * { flex: 1 1 260px; }Responsive wrapping cards.
Frequently asked questions
Flexbox or Grid?
Flexbox is for one dimension (a row or a column) where content size drives layout. Grid is for two dimensions where you define rows and columns up front. They combine well: grid for the page, flex inside components.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Items with flex: 1 share the available space equally regardless of their content size.
Why is my flex item overflowing?
Flex items default to min-width: auto, so they will not shrink below their content. Set min-width: 0 (or overflow: hidden) on the item.