CSS Flexbox Cheat Sheet
Complete CSS Flexbox reference. Container and item properties, alignment, wrapping, ordering — everything you need to master Flexbox layouts.
Container Properties
Main Axis Alignment (justify-content)
Cross Axis Alignment (align-items)
Multi-line Alignment (align-content)
Item Properties
Gap
Common Patterns
Container Properties
| display: flex | Enable flex container |
| flex-direction: row | Items in a row (default) |
| flex-direction: column | Items in a column |
| flex-direction: row-reverse | Row, reversed order |
| flex-wrap: nowrap | Single line (default) |
| flex-wrap: wrap | Wrap items to next line |
Main Axis Alignment (justify-content)
| justify-content: flex-start | Pack items to start (default) |
| justify-content: flex-end | Pack items to end |
| justify-content: center | Center items on main axis |
| justify-content: space-between | Equal space between items |
| justify-content: space-around | Equal space around items |
| justify-content: space-evenly | Equal space between and around items |
Cross Axis Alignment (align-items)
| align-items: stretch | Stretch to fill container (default) |
| align-items: flex-start | Align to cross start |
| align-items: flex-end | Align to cross end |
| align-items: center | Center on cross axis |
| align-items: baseline | Align by text baseline |
Multi-line Alignment (align-content)
| align-content: flex-start | Lines packed to start |
| align-content: flex-end | Lines packed to end |
| align-content: center | Lines centered |
| align-content: space-between | Equal space between lines |
| align-content: stretch | Lines stretch to fill (default) |
Item Properties
| flex: 1 | Shorthand: grow 1, shrink 1, basis 0 |
| flex-grow: 1 | How much item grows relative to siblings |
| flex-shrink: 0 | Prevent item from shrinking |
| flex-basis: 200px | Initial size before growing/shrinking |
| align-self: center | Override align-items for this item |
| order: -1 | Move item before others (default 0) |
Gap
| gap: 16px | Space between all items |
| row-gap: 16px | Space between rows |
| column-gap: 16px | Space between columns |
Common Patterns
| display:flex; justify-content:center; align-items:center | Perfect centering |
| display:flex; flex-direction:column; min-height:100vh | Full-height layout |
| display:flex; flex-wrap:wrap; gap:1rem | Responsive grid without media queries |
| flex:1 (on child) | Make one item fill remaining space |
| margin-left:auto (on last child) | Push item to far right |
Try It Live
Test these patterns with our free CSS Grid Generator. No signup needed.
Open CSS Grid Generator →
Step-by-Step Guide
Read Guide →