This CSS Flexbox cheat sheet lists the flex container and item properties for building one-dimensional layouts — aligning, spacing and ordering elements.
Container (parent)
| Property | What it does |
|---|---|
| display: flex | Make a flex container |
| flex-direction: row | column | Main axis direction |
| justify-content: center | Align along main axis |
| align-items: center | Align along cross axis |
| flex-wrap: wrap | Allow wrapping |
| gap: 1rem | Space between items |
Items (children)
| Property | What it does |
|---|---|
| flex: 1 | Grow to fill space |
| flex-grow: 1 | Growth factor |
| flex-shrink: 0 | Prevent shrinking |
| flex-basis: 200px | Base size |
| align-self: flex-end | Override cross-axis align |
| order: 2 | Reorder an item |