Updated June 29, 2026
CSS Flexbox cheat sheet
Flexbox lays out items in a single row or column and distributes space between them. Properties split into two groups: those you set on the flex container, and those you set on each flex item.
On the container
| Property | What it does |
|---|---|
display: flex | Turns an element into a flex container. |
flex-direction: row | column | Sets the main axis: horizontal or vertical. |
flex-wrap: wrap | Allows items to wrap onto multiple lines. |
justify-content: space-between | Distributes items along the main axis. |
align-items: center | Aligns items on the cross axis. |
align-content: center | Aligns wrapped lines on the cross axis. |
gap: 1rem | Sets spacing between items. |
On the items
| Property | What it does |
|---|---|
flex: 1 | Shorthand for grow, shrink, and basis; 1 means fill available space. |
flex-grow: 1 | How much an item grows relative to siblings. |
flex-shrink: 0 | Prevents an item from shrinking when space is tight. |
flex-basis: 200px | The item's starting size before growing or shrinking. |
align-self: flex-end | Overrides align-items for a single item. |
order: 2 | Changes the visual order without moving the markup. |
Common justify-content values
| Value | Effect |
|---|---|
flex-start | Pack items to the start. |
center | Center items on the main axis. |
space-between | First and last at the edges, equal gaps between. |
space-around | Equal space around each item. |
space-evenly | Equal space between and at the ends. |
Main axis vs cross axis
justify-content works along the main axis (set by flex-direction), while align-items works along the cross axis. Switching to flex-direction: column swaps which axis each one controls.References
Questions
What is the difference between justify-content and align-items?
justify-content positions items along the main axis, while align-items positions them along the cross axis. Which direction each affects depends on flex-direction.
What does flex: 1 mean?
It is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0, which makes the item grow to share available space equally with other flex: 1 siblings.