Direction
This establishes the main-axis.
Wrap
By default, flex items will all try to fit onto one line. You can change that.
flex-wrap
flex-wrap: wrap;
flex-wrap-reverse
flex-wrap: wrap-reverse;
flex-nowrap
flex-wrap: nowrap;
Justify Content
This defines the alignment along the main axis.
justify-start
justify-content: flex-start
justify-end
justify-content: flex-end
justify-center
justify-content: center
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
Align Items
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
items-stretch
align-items: stretch
items-start
align-items: flex-start
items-end
align-items: flex-end
items-center
align-items: center
items-baseline
align-items: baseline
Align Content
This aligns a flex container’s lines within when there is extra space in the cross-axis.
content-center
align-content: center
content-start
align-content: flex-start
content-end
align-content: flex-end
content-between
align-content: space-between
content-around
align-content: space-around
content-evenly
align-content: space-evenly