Flexbox is the CSS layout model for arranging items in a single row or column and distributing space between them. This cheat sheet groups every Flexbox property by task — container setup, alignment along both axes, item sizing, and spacing — so you can find the exact property you need in seconds.
Keep this page bookmarked while you build layouts. Each property is shown with the value you would write and a short explanation of what it does. For two-dimensional layouts, pair this with the <a href="/cheatsheet/css-grid">CSS Grid cheat sheet</a>.
Container Setup
| Property / Value | What it does |
|---|
display: flex | Make an element a block-level flex container. |
display: inline-flex | Make a flex container that flows inline with text. |
flex-direction: row | Lay items left to right along the main axis (default). |
flex-direction: row-reverse | Lay items right to left. |
flex-direction: column | Stack items top to bottom. |
flex-direction: column-reverse | Stack items bottom to top. |
flex-wrap: nowrap | Keep all items on a single line (default). |
flex-wrap: wrap | Allow items to wrap onto multiple lines. |
flex-flow: row wrap | Shorthand for flex-direction and flex-wrap. |
Justify Content (main axis)
| Property / Value | What it does |
|---|
justify-content: flex-start | Pack items at the start of the main axis (default). |
justify-content: flex-end | Pack items at the end of the main axis. |
justify-content: center | Center items along the main axis. |
justify-content: space-between | Equal space between items, none at the edges. |
justify-content: space-around | Equal space around each item. |
justify-content: space-evenly | Equal space between items and at the edges. |
Align Items (cross axis)
| Property / Value | What it does |
|---|
align-items: stretch | Stretch items to fill the cross axis (default). |
align-items: flex-start | Align items to the start of the cross axis. |
align-items: flex-end | Align items to the end of the cross axis. |
align-items: center | Center items along the cross axis. |
align-items: baseline | Align items by the baseline of their text. |
Align Content (wrapped lines)
| Property / Value | What it does |
|---|
align-content: flex-start | Pack wrapped lines at the start of the container. |
align-content: center | Center the group of wrapped lines. |
align-content: space-between | Space wrapped lines apart, none at the edges. |
align-content: stretch | Stretch wrapped lines to fill the container (default). |
Item Properties
| Property / Value | What it does |
|---|
flex-grow: 1 | Let an item grow to fill available free space. |
flex-shrink: 0 | Prevent an item from shrinking below its basis. |
flex-basis: 200px | Set an item's initial size along the main axis. |
flex: 1 | Shorthand for grow 1, shrink 1, basis 0 — equal-width items. |
flex: 0 0 auto | Don't grow or shrink; size the item to its content. |
order: 2 | Reorder a single item without changing the HTML. |
align-self: center | Override align-items for one item. |
Spacing
| Property / Value | What it does |
|---|
gap: 1rem | Space between items, both rows and columns. |
row-gap: 1rem | Space between rows only. |
column-gap: 1rem | Space between columns only. |
CSS Flexbox Cheat Sheet FAQs
What is the difference between justify-content and align-items?
justify-content positions items along the main axis (the direction set by flex-direction), while align-items positions them along the cross axis. In a row, justify-content controls horizontal spacing and align-items controls vertical alignment.
How do I center a div with Flexbox?
Set the parent to display: flex, then add justify-content: center and align-items: center. This centers the child both horizontally and vertically.
What does the flex shorthand mean?
flex is shorthand for flex-grow, flex-shrink, and flex-basis. Writing flex: 1 means grow 1, shrink 1, basis 0 — which makes items share space equally. flex: 0 0 auto keeps an item at its content size.
When should I use Flexbox instead of CSS Grid?
Use Flexbox for one-dimensional layouts — a single row or column, such as a navbar or a button group. Use
CSS Grid for two-dimensional layouts where you need to control both rows and columns at once.
How do I add space between flex items?
Use the gap property on the flex container, for example gap: 1rem. It adds space between items without adding margins to the edges. Use row-gap or column-gap to control each direction.
How do I reorder flex items without changing the HTML?
Set the order property on an item. Items are laid out in ascending order value (default 0), so order: -1 moves an item first and order: 2 moves it later, all without editing the markup.
Why aren't my flex items wrapping onto a new line?
By default a flex container uses flex-wrap: nowrap, which forces all items onto one line. Add flex-wrap: wrap so items move to the next line when they run out of room.
