Flexbox Cheatsheet
Flex Container
display: flex;
display: inline-flex;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
align-items: stretch;
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-content: stretch;
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
Flex Item
order: 0;
flex-grow: 0;
flex-grow: 1;
flex-shrink: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
align-self: flex-start;
align-self: center;
align-self: flex-end;
align-self: baseline;
align-self: stretch;
Download a printable PDF (217 kB) version of this cheat sheet.
Resources
- VSCode extension for this Cheat Sheet
- A Complete Guide to Flexbox
- Solved by Flexbox
- Flexbox Patterns
- Flexbugs: Flexbox issues
This cheatsheet is based on css-cheats by @sakamies.