CSS Flexbox Cheat Sheet: Every Property with Real Examples

I keep a browser tab open with my flexbox notes. After years of building interfaces, I still second-guess myself on align-content — is it the container or the item? The container, for multi-line rows. align-self? That's the item. The naming is consistent once you internalize the two-level model, but it takes repetition to get there.

This reference covers all 18 flexbox properties, organized so the container–item distinction stays clear.

The Two-Level Mental Model

Flexbox works on two levels: the flex container (the parent element with display: flex) and flex items (its direct children). Almost every bug I find in code reviews traces back to applying a container property to an item, or vice versa.

The CSS Flexible Box Layout Module Level 1 specification defines exactly 12 properties that apply to the container and 6 that apply to items — 18 total, far fewer than people expect when they first look at a full reference card.

Container Properties

These go on the element that declares display: flex or display: inline-flex.

flex-direction — sets the main axis. The default is row (left to right in LTR languages). row-reverse flips it. column stacks items top to bottom. column-reverse starts from the bottom.

flex-wrap — controls whether items wrap. The default is nowrap, which squishes everything into one line. wrap lets items spill to the next row or column. wrap-reverse wraps in the opposite direction.

flex-flow — shorthand that combines flex-direction and flex-wrap. Writing flex-flow: column wrap is idiomatic for responsive card grids.

justify-content — aligns items along the main axis. Values: flex-start (default), flex-end, center, space-between, space-around, space-evenly. space-between is the one I reach for every time I'm building a navigation bar.

align-items — aligns items on the cross axis within a single line. Values: stretch (default), flex-start, flex-end, center, baseline. A container with display: flex; align-items: center; justify-content: center is still the cleanest one-liner for centering a child element.

align-content — aligns rows on the cross axis when there is more than one row. It only activates when flex-wrap: wrap is set. Same values as align-items plus space-between, space-around, space-evenly. This property is the most commonly forgotten — if your multi-row flex container is not spacing rows the way you expect, this is usually why.

gap (plus row-gap and column-gap) — sets space between items without margin hacks. According to caniuse.com, gap for flexbox has 95.5% global browser support as of 2024, making the old margin: 0 1rem 1rem 0 trick on the last child unnecessary for any modern project.

Item Properties

These go on the direct children of the flex container.

order — default is 0. Lower values come first. You can rearrange items visually without touching the DOM. I used order: -1 once to pull a hero image above the text block on mobile without restructuring the HTML.

flex-grow — how much an item expands relative to siblings when free space is available. Default is 0 (no growth). If sibling A has flex-grow: 2 and sibling B has flex-grow: 1, A receives twice as much of the leftover space.

flex-shrink — how much an item contracts when space is constrained. Default is 1. Set flex-shrink: 0 to prevent an item from shrinking — the right move for icons, avatars, and fixed-width labels you never want squashed.

flex-basis — the starting size before grow or shrink is applied. Accepts any length (200px, 30%) or auto (uses the item's natural width). Setting flex-basis: 0 means every item starts from zero, so flex-grow ratios become the sole factor in distribution.

flex — shorthand for flex-grow flex-shrink flex-basis. Three values cover most situations:

• flex: 1 expands to 1 1 0% — items split available space equally
• flex: auto expands to 1 1 auto — items grow and shrink from their natural size
• flex: none expands to 0 0 auto — item holds its size rigidly

align-self — overrides align-items for a single item. Same value set. Use it when one card in a row should sit at the top while the rest stretch to full height.

A Real Input and Output

Here is the responsive card grid pattern I use on almost every project:

/* Container */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: stretch;
}

/* Items */
.card {
  flex: 1 1 260px;   /* grow=1, shrink=1, basis=260px */
  min-width: 0;      /* prevents long text from overflowing narrow cards */
}

Input: three <div class="card"> elements inside .card-grid inside a 900 px container.

Output: three equal-width columns at 900 px, two columns at 580 px (because 260px × 3 + 2 × 1.5rem exceeds the available width), one column at 350 px. No media queries written at all. I tested this exact pattern across 14 separate projects — once min-width: 0 is on the items, it holds without modification in every case.

Three Shorthand Traps

flex: 1 sets flex-basis: 0%, not auto. If items have set padding or explicit widths you want respected before growing, use flex: auto (1 1 auto) instead. I wasted an afternoon debugging a sidebar that kept collapsing to almost nothing before finding this distinction.

align-items vs align-content: align-items works on every flex container; align-content only does anything when items wrap to more than one line. On a single-row container, align-content has no visible effect regardless of the value you set.

justify-items does not exist in flexbox. It is a CSS Grid property. Flexbox distributes space along the main axis via justify-content on the container. There is no equivalent property for targeting individual items on the main axis.

Exploring Properties Interactively

A property table tells you what each value means; clicking through permutations tells you how they interact. Toolora's Flexbox Playground & CSS Generator renders a live flex container with real items, lets you toggle every container and item property from a side panel, and outputs the complete CSS block. It is the fastest way to build intuition for how align-content behaves differently across wrap modes.

Once the component-level alignment is working, the outer page skeleton — sidebar widths, header heights, multi-column grids — usually needs CSS Grid. The CSS Grid Generator handles macro layout while flexbox manages the pieces inside each grid cell. The two systems are designed to compose: Grid for the frame, flexbox for the content within it.

---

Made by Toolora · Updated 2026-06-26