Flexbox 7 - Align Content

align-content is used to set how multiple lines are spaced apart from each other.

align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

1
2
3
4
5
6
7

7-1. align-content not set

1
2
3
4
5
6
7

7-2. align-content : flex-start;

1
2
3
4
5
6
7

7-3. align-content : flex-end;

1
2
3
4
5
6
7

7-4. align-content : center;

1
2
3
4
5
6
7

7-5. align-content : space-between;

1
2
3
4
5
6
7

7-6. align-content : space-around;

1
2
3
4
5
6
7

7-7. align-content : stretch;