Flexbox transformed CSS layout. Before it, centering something vertically required hacks. Now it's two lines. But Flexbox has a lot of properties — container properties, item properties, alignment axes, shorthand values — and it's easy to forget which does what. This cheatsheet covers every property with practical examples.
The DevToolShack Flexbox Visualizer lets you toggle every property and see the result live — perfect for experimenting when reading this guide.
The Two Axes
Everything in Flexbox revolves around two axes. The main axis runs in the direction items are placed (horizontal by default). The cross axis runs perpendicular to it. Understanding this distinction is the key to Flexbox — many properties behave differently depending on which axis they operate on.
Container Properties
These go on the parent element with display: flex.
flex-direction
Sets the main axis direction — which way items flow.
.container {
display: flex;
flex-direction: row; /* → default: left to right */
flex-direction: row-reverse; /* ← right to left */
flex-direction: column; /* ↓ top to bottom */
flex-direction: column-reverse; /* ↑ bottom to top */
}flex-wrap
Whether items wrap to a new line when they run out of space.
flex-wrap: nowrap; /* default: items shrink to fit, no wrapping */
flex-wrap: wrap; /* items wrap to next line */
flex-wrap: wrap-reverse; /* items wrap upward */justify-content
Aligns items along the main axis (horizontal in a row layout).
justify-content: flex-start; /* items at the start */
justify-content: flex-end; /* items at the end */
justify-content: center; /* items centred */
justify-content: space-between; /* equal space between items, none at edges */
justify-content: space-around; /* equal space around each item */
justify-content: space-evenly; /* equal space between items and edges */align-items
Aligns items along the cross axis (vertical in a row layout) — for a single line.
align-items: stretch; /* default: items stretch to fill container height */
align-items: flex-start; /* items at the top */
align-items: flex-end; /* items at the bottom */
align-items: center; /* items vertically centred */
align-items: baseline; /* items aligned by text baseline */align-content
Aligns multiple lines of items along the cross axis — only applies when flex-wrap: wrap is set and there are multiple rows.
align-content: flex-start; /* rows packed to the top */
align-content: flex-end; /* rows packed to the bottom */
align-content: center; /* rows centred */
align-content: space-between; /* rows spaced evenly, none at edges */
align-content: space-around; /* equal space around each row */
align-content: stretch; /* rows stretch to fill the container */gap
Sets spacing between flex items — much cleaner than using margins.
gap: 16px; /* equal gap in both directions */
gap: 16px 24px; /* row-gap column-gap */
row-gap: 16px; /* only between rows */
column-gap: 24px; /* only between columns */Item Properties
These go on the child elements inside the flex container.
flex-grow
How much an item grows relative to others when there's extra space. Default is 0 (don't grow).
.item-a { flex-grow: 1; } /* takes up 1 share of available space */
.item-b { flex-grow: 2; } /* takes up 2 shares — twice as wide as item-a */flex-shrink
How much an item shrinks relative to others when space is tight. Default is 1 (shrink equally).
.item { flex-shrink: 0; } /* never shrink — useful for fixed-size sidebars */flex-basis
The starting size of an item before growing or shrinking. Think of it as the "ideal" size.
flex-basis: auto; /* default: use the item's width/height */
flex-basis: 200px; /* start at 200px, then grow/shrink from there */
flex-basis: 25%; /* start at 25% of the container */
flex-basis: 0; /* start at nothing, grow from zero */flex (shorthand)
The shorthand for flex-grow, flex-shrink, and flex-basis together. Use this instead of the three separate properties.
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 — grow to fill */
flex: auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
flex: none; /* flex-grow: 0, flex-shrink: 0, flex-basis: auto — rigid */
flex: 0 0 200px; /* fixed 200px — won't grow or shrink */align-self
Overrides align-items for a specific item.
.special-item {
align-self: flex-end; /* this item goes to the bottom while others align normally */
}order
Changes the visual order of items without changing the DOM. Default is 0; lower numbers appear first.
.first-visually { order: -1; }
.last-visually { order: 1; }Common Flexbox Patterns
Perfect Centering (Horizontal + Vertical)
.container {
display: flex;
justify-content: center;
align-items: center;
}Navbar: Logo Left, Links Right
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Sidebar + Main Layout
.layout {
display: flex;
gap: 24px;
}
.sidebar { flex: 0 0 260px; } /* fixed width sidebar */
.main { flex: 1; } /* main content fills remaining space */Responsive Card Grid (wrapping)
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow and shrink, minimum 280px wide */
}