Align Content Classes

Bellow is a Demonstration of How the Align Content Class Works

align-content: flex-start (default)
Lines are packed toward the start of the container
1
2
3
4
5
6
7
8
align-content: flex-end
Lines are packed toward the end of the container
1
2
3
4
5
6
7
8
align-content: center
Lines are centered in the container
1
2
3
4
5
6
7
8
align-content: space-between
Lines are evenly distributed with first line at start and last line at end
1
2
3
4
5
6
7
8
align-content: space-around
Lines are evenly distributed with equal space around each line
1
2
3
4
5
6
7
8
align-content: space-evenly
Lines are evenly distributed with equal space around and between them
1
2
3
4
5
6
7
8
Important Notes
  • align-content only works when there are multiple lines of flex items (requires flex-wrap: wrap)
  • It aligns the lines within the container along the cross-axis (vertical in row direction, horizontal in column direction)
  • Has no effect when items are in a single line
  • Container must have extra space in the cross-axis to see the effect