CSS Flexbox Cheat Sheet: The Complete Reference Guide

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that provides efficient distribution of space among items in a container, even when their sizes are dynamic or unknown. Unlike traditional block or inline layouts, Flexbox operates along a single axis at a time — either a main axis or a cross axis.

Every Flexbox layout is built around two entities:

• Flex Container — the parent element with display: flex
• Flex Items — the direct children of that container

The core mental model: flex-direction defines which axis is the main axis. All alignment properties (justify-content, align-items, align-content) are relative to these axes, not to "horizontal" or "vertical" in the screen sense.

Understanding this hierarchy is essential: container properties control how groups of items are distributed, while item properties control how individual items behave within that distribution.

Footnotes

1. Basic concepts of flexbox - MDN - Foundational MDN reference on flex container and flex item concepts. ↩

2. A Complete Guide to Flexbox - CSS-Tricks - Comprehensive visual guide to all Flexbox properties and values. ↩

The Two Axes — The Key to Understanding Flexbox

Before memorizing any property values, internalize this: Flexbox properties don't think in "horizontal" or "vertical." They think in "main axis" and "cross axis." Changing flex-direction swaps what these axes represent.

• justify-content always distributes along the main axis
• align-items and align-content always distribute along the cross axis

Footnotes

1. CSS Flexbox Explained - freeCodeCamp - Detailed guide covering container vs item property distinctions. ↩

Flex Container Properties — Complete Reference

The following properties are applied to the parent flex container (the element with display: flex).

1. display

1.container {
2  display: flex;        /* block-level flex container */
3  display: inline-flex; /* inline-level flex container */
4}

This is the gateway — it establishes a flex formatting context for all direct children.

2. flex-direction

Defines the main axis direction:

3. flex-wrap

Controls whether items wrap onto multiple lines:

4. flex-flow (Shorthand)

1.container {
2  flex-flow: <direction> <wrap>;  /* e.g., flex-flow: row wrap; */
3}

5. justify-content — Main Axis Distribution

Distributes extra free space along the main axis:

6. align-items — Cross Axis Alignment (Single Line)

Controls how each item aligns on the cross axis:

7. align-content — Cross Axis Distribution (Multiple Lines)

Controls how lines of items are distributed when there is extra space on the cross axis. Only works with flex-wrap: wrap and multiple lines:

8. gap

1.container {
2  gap: 10px;              /* row-gap and column-gap */
3  gap: 10px 20px;         /* row-gap column-gap */
4  row-gap: 10px;
5  column-gap: 20px;
6}

The gap property explicitly controls spacing between items without using margins.

Footnotes

1. Flex It Like a Pro - DEV Community - Beginner-friendly breakdown of all Flexbox properties. ↩

2. CSS Flex Property & Layout Guide - Elementor - Complete guide covering main axis vs cross axis concepts. ↩

3. FLEX: Visual Cheatsheet - Malven - Visual cheat sheet for all Flexbox property values. ↩

4. Aligning items in a flex container - MDN - MDN deep dive into Flexbox alignment properties. ↩

5. Everything You Need To Know About Alignment In Flexbox - Smashing Magazine - Advanced article on fallback alignment and auto margins. ↩

6. Common CSS Flexbox Layout Patterns - Tobias Ahlin - 10 practical layout patterns with copy-paste CSS. ↩

Flex Item Properties — Complete Reference

These properties are applied to individual flex items (the direct children of the container).

1. order

1.item { order: <integer>; }  /* default: 0 */

Controls the visual order of items. Items with the same order value revert to source order. Negative values are allowed.

2. flex-grow

1.item { flex-grow: <number>; }  /* default: 0 */

Defines the grow factor. If all items have flex-grow: 1, remaining space is distributed equally. An item with flex-grow: 2 would take twice as much space as one with flex-grow: 1.

3. flex-shrink

1.item { flex-shrink: <number>; }  /* default: 1 */

Defines the shrink factor. Items with a higher value shrink more. flex-shrink: 0 prevents an item from shrinking.

4. flex-basis

1.item { flex-basis: <length> | auto | content; }  /* default: auto */

Sets the initial main size of an item before free space distribution. It overrides width/height for flex items.

5. flex (Shorthand) ⭐

1.item {
2  flex: none;          /* → 0 0 auto */
3  flex: auto;          /* → 1 1 auto */
4  flex: initial;       /* → 0 1 auto */
5  flex: 1;             /* → 1 1 0% */
6  flex: 2 1;           /* → 2 1 0% */
7  flex: 1 1 200px;     /* → grow=1 shrink=1 basis=200px */
8}

This is the recommended way to set flex sizing — the CSS specification strongly advises using the shorthand over individual properties.

6. align-self

1.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Overrides align-items for a single item, allowing it to have a different cross-axis alignment than its siblings.

Footnotes

1. Understanding Flexbox - Medium/freeCodeCamp - Deep walkthrough of flex item properties including nested containers. ↩

2. flex CSS property - MDN - Specification detail on the flex shorthand and its expansion rules. ↩

Common Flexbox Layout Patterns

Here are the most frequently used layout patterns with ready-to-use code2.

1. Perfect Centering

1.container {
2  display: flex;
3  justify-content: center;  /* main axis center */
4  align-items: center;       /* cross axis center */
5}

The most iconic Flexbox pattern — centers an item both horizontally and vertically without knowing its size.

2. Navbar with Pushed-Right Item

1.navbar {
2  display: flex;
3  /* no justify-content needed — items flow from start */
4}
5.navbar .push-right {
6  margin-left: auto;  /* absorbs all left-side space */
7}

Using margin-left: auto on a flex item pushes it to the end — this works because auto margins absorb all available free space on that side.

3. Holy Grail Layout (Sidebar + Main + Sidebar)

1.layout {
2  display: flex;
3  flex-wrap: wrap;
4}
5.sidebar-left  { flex: 0 0 200px; }
6.main-content  { flex: 1; }         /* grows to fill remaining space */
7.sidebar-right { flex: 0 0 200px; }

4. Responsive Card Grid (with gap)

1.card-grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 16px;
5}
6.card {
7  flex: 1 1 280px; /* grow, shrink, min 280px */
8}

Items grow to fill space, shrink when needed, but never go below 280px — at which point they wrap to the next line.

5. Sticky Footer

1.page {
2  display: flex;
3  flex-direction: column;
4  min-height: 100vh;
5}
6.content {
7  flex: 1;  /* grows to push footer down */
8}

Space Distribution Visual Guide

Footnotes

1. Mastering CSS Flexbox - Williams Media - Responsive card layout and common Flexbox patterns. ↩

2. Common CSS Flexbox Layout Patterns - Tobias Ahlin - Graph patterns, grids, and alternating layouts with Flexbox. ↩

3. Everything You Need To Know About Alignment In Flexbox - Smashing Magazine - Detailed explanation of auto margin behavior and priority over justify-content. ↩

Quick Reference: The flex Shorthand Value Decoder

The flex shorthand is the most important property for item sizing. Here's a decoder for the most common patterns:

The formula for distributing extra space:

$\text{Item size} = \text{flex-basis} + \frac{\text{flex-grow}_i}{\sum \text{flex-grow}} \times \text{free space}$

And for shrinking when there's overflow:

$\text{Shrink amount}_i = \frac{\text{flex-shrink}_i \times \text{flex-basis}_i}{\sum (\text{flex-shrink} \times \text{flex-basis})} \times \text{overflow}$