CSS Flexbox Layout Cheat Sheet
This page provides a visual cheat sheet for CSS Flexbox layout, including container properties, item properties, and common layout examples.
Container Properties
| Property | Value | Description |
|---|---|---|
display |
flex |
Enables flex layout |
flex-direction |
row |
Main axis is horizontal, start at left |
row-reverse |
Main axis is horizontal, start at right | |
column |
Main axis is vertical, start at top | |
column-reverse |
Main axis is vertical, start at bottom | |
flex-wrap |
nowrap |
Default: items on a single line |
wrap |
Items wrap onto multiple lines | |
wrap-reverse |
Items wrap onto multiple lines in reverse | |
justify-content |
flex-start |
Main axis alignment: Left alignment |
flex-end |
Main axis alignment: Right alignment | |
center |
Main axis alignment: Centered | |
space-between |
Main axis alignment: Items evenly distributed; first item at the start, last item at the end | |
space-around |
Main axis alignment: Items evenly distributed with equal space around them | |
align-items |
flex-start |
Cross axis alignment: Top alignment |
flex-end |
Cross axis alignment: Bottom alignment | |
center |
Cross axis alignment: Centered | |
baseline |
Cross axis alignment: Items aligned by their text baseline | |
stretch |
Default: Items stretch to fill the container | |
align-content |
flex-start |
Cross axis (multi-line) alignment: Top alignment |
flex-end |
Cross axis alignment: Bottom alignment | |
center |
Cross axis alignment: Centered | |
space-between |
Cross axis alignment: Even distribution; first line at start, last at end | |
space-around |
Cross axis alignment: Even distribution with equal space around lines | |
stretch |
Default: Lines stretch to take up remaining space |
Item Properties
| Property | Value | Description |
|---|---|---|
flex-grow |
number |
Defines the ability for a flex item to grow if necessary (default: 0) |
flex-shrink |
number |
Defines the ability for a flex item to shrink if necessary (default: 1) |
flex-basis |
auto |
Defines the default size of an element before the remaining space is distributed |
align-self |
auto |
Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items |
flex-start |
Align to start of container | |
flex-end |
Align to end of container | |
center |
Centered in container | |
baseline |
Aligned by baseline | |
stretch |
Stretched to fill container (if height allows) |
Common Layout Examples
| Layout | Container Properties | Item Properties |
|---|---|---|
| Horizontal Nav | display: flex;justify-content: space-around; |
|
| Vertical Sidebar | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Grid Layout | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Card Layout | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |