CSS Flexbox Cheatsheet

Concepts

Flex Container — parent
Flex Item — direct child of Flex Container
Main Axis — row, column
Cross Axis — runs perpendicular to Main Axis
Available Space — fill along Main Axis

Flex Container Properties

display: flex;
flex-flow: row wrap;
flex-flow: column nowrap;

Container Main Axis Alignment

justify-content: flex-start; default; also: flex-end,
justify-content: center;
justify-content: space-between; also: space-around, space-evenly

Container Cross Axis Alignment

align-items: stretch; default
align-items: center;
align-items: flex-start; also: flex-end

Container Both Main and Cross Axis Alignment

handles layout of wrapped items
align-content: normal; default
align-content: center;
align-content: space-around; also: space-between

Flex Item Properties

Item Main Axis Alignment

Items can grow or shrink and fill Available Space
flex: grow shrink basis
flex: initial; default, same as flex: 0 1 auto
flex: auto; same as flex: 1 1 auto
flex: 0; same as flex: 0 0 auto
flex: 1; same as flex: 1 1 0
flex: 2; same as flex: 2 1 0

Item Cross Axis Alignment

align-self: stretch; default
align-self: center;
align-self: flex-start; also: flex-end

Item Width and flex-basis

items can grow or shrink in free space
flex-basis: auto or content then browser width or set width
flex-basis > 0 the flex-basis width
flex-basis = 0 then width not part of layout calculation