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 |
Enable flex layout |
flex-direction |
row |
Main axis is horizontal, starting from left |
row-reverse |
Main axis is horizontal, starting from right | |
column |
Main axis is vertical, starting from top | |
column-reverse |
Main axis is vertical, starting from bottom | |
flex-wrap |
nowrap |
Default, items are arranged on a single line |
wrap |
Items wrap onto multiple lines | |
wrap-reverse |
Items wrap onto multiple lines in reverse order | |
justify-content |
flex-start |
Main axis alignment: align to start |
flex-end |
Main axis alignment: align to end | |
center |
Main axis alignment: center alignment | |
space-between |
Main axis alignment: items are evenly distributed; first item at start, last item at end | |
space-around |
Main axis alignment: items are evenly distributed with equal space around them | |
align-items |
flex-start |
Cross axis alignment: align to start |
flex-end |
Cross axis alignment: align to end | |
center |
Cross axis alignment: center alignment | |
baseline |
Cross axis alignment: align items along their text baseline | |
stretch |
Default, cross axis alignment: stretch to fill the container | |
align-content |
flex-start |
Cross axis multi-line alignment: align to start |
flex-end |
Cross axis multi-line alignment: align to end | |
center |
Cross axis multi-line alignment: center alignment | |
space-between |
Cross axis multi-line alignment: items are evenly distributed; first line at start, last line at end | |
space-around |
Cross axis multi-line alignment: items are evenly distributed with equal space around them | |
stretch |
Default, cross axis multi-line alignment: lines stretch to take up the remaining space |
Item Properties
| Property | Value | Description |
|---|---|---|
flex-grow |
number |
Defines the ability for a flex item to grow if necessary. Default is 0 (don’t grow) |
flex-shrink |
number |
Defines the ability for a flex item to shrink if necessary. Default is 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 |
Aligns the item to the start of the container | |
flex-end |
Aligns the item to the end of the container | |
center |
Aligns the item to the center | |
baseline |
Aligns the item’s baseline with the container’s baseline | |
stretch |
Stretches the item to fill the container (if the container has height) |
Common Layout Examples
| Layout | Container Properties | Item Properties |
|---|---|---|
| Horizontal Navigation Bar | 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); |