Container Properties
Main axis direction for item layout
Whether items wrap to new lines
Alignment along the main axis
Alignment along the cross axis
Multi-line cross-axis alignment (needs wrap)
10px
Item Properties
Click an item in the preview to select it, then adjust its properties below.
0
How much the item grows relative to siblings
1
How much the item shrinks when space is tight
Initial main size before grow/shrink
0
Visual ordering (lower appears first)
Override container's align-items for this item
Presets
Live Preview
Flexbox Cheatsheet
| Container Properties | |
|---|---|
| display: flex | Creates a flex container |
| flex-direction | row | row-reverse | column | column-reverse |
| flex-wrap | nowrap | wrap | wrap-reverse |
| justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly |
| align-items | stretch | flex-start | flex-end | center | baseline |
| align-content | normal | flex-start | flex-end | center | space-between | space-around | stretch |
| gap | Sets spacing between items (row-gap, column-gap) |
| Item Properties | |
| flex-grow | 0 = no grow; 1+ = fills available space proportionally |
| flex-shrink | 1 = can shrink; 0 = won't shrink below basis |
| flex-basis | Initial size before growing/shrinking (auto, px, %) |
| order | Integer controlling visual order (default 0) |
| align-self | Overrides align-items for a single item |
| Shorthand | |
| flex: 1 | flex-grow: 1; flex-shrink: 1; flex-basis: 0% |
| flex: auto | flex-grow: 1; flex-shrink: 1; flex-basis: auto |
| flex: none | flex-grow: 0; flex-shrink: 0; flex-basis: auto |
| flex: 0 1 200px | No grow, can shrink, starts at 200px |
Generated CSS