A CSS Flexbox cheatsheet is a quick reference for all flex container and flex item properties. Flexbox is the most widely-used CSS layout system for building responsive one-dimensional layouts — rows or columns of items that distribute space automatically. Click any value below to see a live preview of exactly how it affects item placement.
flex makes the container a block-level flex container. inline-flex makes it inline-level.
row (default) lays items left-to-right. column stacks them top-to-bottom.
space-between distributes items with equal space between. space-evenly includes equal space at edges too.
stretch (default) makes items fill the container height. center vertically centers them.
nowrap (default) keeps all items on one line, shrinking them if needed. wrap allows overflow onto new lines.
Only has an effect when flex-wrap creates multiple lines. Controls vertical spacing between those lines.
gap is shorthand for row-gap column-gap. Replaces older margin hacks. Works with both wrapped and unwrapped layouts.
Quick Reference: Shorthand Properties
| Shorthand | Equivalent | Use case |
|---|---|---|
| flex: 1 | grow:1 shrink:1 basis:0% | Equal-width flexible columns |
| flex: auto | grow:1 shrink:1 basis:auto | Grow and shrink from content size |
| flex: none | grow:0 shrink:0 basis:auto | Rigid item, fixed to content size |
| flex: 0 1 200px | grow:0 shrink:1 basis:200px | Fixed base size, can shrink |
| flex-flow: row wrap | direction + wrap | Responsive wrapping row layout |
| place-content: center | align + justify-content | Center content on both axes |
Common Flexbox Patterns
display: flex; justify-content: center; align-items: center;
display: flex; flex-direction: column; min-height: 100vh; /* main gets: flex: 1 */
display: flex; gap: 1rem; /* children get: flex: 1 */
display: flex; flex-wrap: wrap; gap: 1rem; /* children: flex: 1 1 200px */
How to Use the CSS Flexbox Cheatsheet
CSS Flexbox is the go-to layout method for arranging elements along a single axis — whether horizontally in a row or vertically in a column. Unlike older float or table-based techniques, flexbox gives you precise control over alignment, spacing, and order with just a few properties. This interactive CSS Flexbox cheatsheet lets you click any property value and immediately see the effect in a live preview panel.
Container vs. Item Properties
Flexbox properties are split into two groups. Container properties are applied to the parent element with display: flex — they control how child items are arranged inside it. Item properties are applied to individual children — they override or extend the container's rules for a specific element. Use the tab buttons at the top of the cheatsheet to switch between both groups.
The Main Axis and Cross Axis
Every flex container has two axes. The main axis runs in the direction set by flex-direction: horizontally for row (the default), vertically for column. The cross axis runs perpendicular to the main axis. justify-content always controls the main axis, while align-items always controls the cross axis — understanding this makes the entire system click.
Clicking Property Values
Each property card shows all its valid values as clickable buttons. Click a value to apply it instantly to the live preview below. The highlighted (darker) item in item-property demos shows exactly how the property affects one specific child while siblings remain unchanged. This side-by-side comparison makes it easy to understand relative properties like flex-grow and order.
Key Properties Explained
justify-content distributes items along the main axis. space-between puts equal gaps between items (none at edges), while space-evenly includes equal gaps at the edges too. align-items controls cross-axis alignment: stretch (default) makes items fill the container height, while center vertically centers them. flex-wrap allows items to overflow onto new rows when there is insufficient space.
The flex Shorthand
Instead of setting flex-grow, flex-shrink, and flex-basis separately, use the flex shorthand. flex: 1 means "grow and shrink equally, starting from zero width" — the most common pattern for equal-width columns. flex: none means "do not grow or shrink" — useful for fixed-size sidebar elements.
Browser Support
CSS Flexbox has full support in all modern browsers and is safe to use without vendor prefixes for any project targeting browsers released after 2017. For very old Internet Explorer support, you may need the -ms-flexbox prefixed version — but this is rarely a concern in 2026.
FAQ
Is this CSS Flexbox cheatsheet free?
Yes, completely free with no signup, no account, and no hidden fees. Everything runs in your browser with no data sent to any server.
Is my data safe when using this tool?
Absolutely. This cheatsheet runs entirely in your browser with no server interaction. No data is collected or stored.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the direction flex items flow), while align-items controls alignment along the cross axis (perpendicular to the main axis). For a row direction, justify-content handles horizontal placement and align-items handles vertical placement.
What does flex-wrap do and when should I use it?
flex-wrap controls whether flex items are forced onto a single line or can wrap onto multiple lines. Use nowrap (the default) when items should stay on one row, wrap when items should flow to new rows, and wrap-reverse to wrap items in reverse order.
What is align-content and how is it different from align-items?
align-content controls spacing between multiple flex lines (rows or columns) when there is extra space on the cross axis. align-items aligns items within a single line. align-content has no effect when all items fit on one line — it only applies when flex-wrap creates multiple lines.
How do flex-grow, flex-shrink, and flex-basis work together?
flex-basis sets the initial size of a flex item before space is distributed. flex-grow determines how much a flex item grows relative to siblings when extra space is available. flex-shrink determines how much it shrinks when space is insufficient. The shorthand flex: 1 sets flex-grow: 1, flex-shrink: 1, flex-basis: 0%.
What is the difference between align-self and align-items?
align-items is applied to the flex container and sets the default alignment for all child items. align-self is applied to an individual flex item and overrides the container's align-items value for just that one item.
Can I print or save this flexbox cheatsheet?
Yes. Use your browser's print function (Ctrl+P / Cmd+P) to print or save as PDF. The cheatsheet layout is designed to be scannable and readable in printed form.