Align Items Classes
Bellow is a Demonstration of How the Align Items Classes Works
Back
align-items: flex-start
Items are aligned to the start of the cross axis
1
2
3 (taller)
align-items: flex-end
Items are aligned to the end of the cross axis
1
2
3 (taller)
align-items: center
Items are centered along the cross axis
1
2
3 (taller)
align-items: baseline
Items are aligned by their text baselines
1 (20px)
2 (40px)
3 (normal)
align-items: stretch (default)
Items stretch to fill the container (unless constrained)
1 (auto)
2 (auto)
3 (auto)
Mixed height items with stretch
Notice how items with fixed height don't stretch
auto
40px
auto
60px