The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Create a flex container | display: flex; | View examples |
| Flow in a row | flex-direction: row; | View examples |
| Flow in a column | flex-direction: column; | View examples |
| Allow wrapping | flex-wrap: wrap; | View examples |
| Space items evenly | gap: 1rem; | View examples |
| Set row spacing | row-gap: 2rem; | View examples |
| Set column spacing | column-gap: 1rem; | View examples |
| Align at main-axis start | justify-content: flex-start; | View examples |
| Center on the main axis | justify-content: center; | View examples |
| Separate items evenly | justify-content: space-between; | View examples |
| Align at cross-axis start | align-items: flex-start; | View examples |
| Center on the cross axis | align-items: center; | View examples |
| Stretch on the cross axis | align-items: stretch; | View examples |
| Set flexible item sizing | flex: 1 1 16rem; | View examples |
| Push an item to the end | margin-inline-start: auto; | View examples |
Flexbox arranges items along one main axis and one cross axis. Start on the parent with display: flex, then choose direction, wrapping, spacing, and item behavior.
Step by step
Detailed examples
Create a flex formatting context
Apply display: flex to the parent. Only its direct children become flex items; deeper descendants keep their existing layout unless they also become flex containers.
.navigation {
display: flex;
}
.navigation > a {
padding: 0.75rem 1rem;
}Choose the main-axis direction
Row follows the document's inline direction, while column follows the block direction. Prefer logical layout behavior instead of assuming left-to-right content.
.profile {
display: flex;
flex-direction: column;
}
@media (min-width: 48rem) {
.profile {
flex-direction: row;
}
}Wrap items onto new lines
Flex containers do not wrap by default. Enable wrapping for rows of cards, tags, or controls that should remain usable at narrow widths.
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Add spacing with gap
Gap inserts space only between flex items. It avoids special rules for first and last child margins and works in both row and column directions.
.card-grid {
display: flex;
flex-wrap: wrap;
row-gap: 2rem;
column-gap: 1rem;
}Align on both axes
Justify-content works on the main axis; align-items works on the cross axis. The physical direction changes when flex-direction changes.
.empty-state {
min-height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}.toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
}
.toolbar__actions {
margin-inline-start: auto;
}Control how individual items grow and shrink
The flex shorthand sets growth, shrinking, and starting size. A useful card pattern allows growth and shrinking from a readable minimum basis.
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 16rem;
}Local code tester
Experiment with Flexbox
Change the direction, wrapping, alignment, gap, or item basis, then update the sandboxed preview.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.