Figure 17-7 align-content:

items are at top of container align-content: flex-start;
A flex item 1

align-content is how the items appear vertically in the container.

Item 2
Item 3 Once again fixed width 200px

items are aligned at bottom of container align-content: flex-end;
A flex item 1

align-content is how the items appear vertically in the container.

Item 2
Item 3 Once again fixed width 200px

extra space is distriubuted evenly at top and bottom; align-content: center;
A flex item 1

align-content is how the items appear vertical in the container row.

Item 2
Item 3 Once again fixed width 200px

evenly spaced across all margins align-content: space-between; Each item has width of 200px;
A flex item 1

align-content is how the items appear vertically in the container.

Item 2
Item 3 Once again fixed width 200px

items are spaced evnely top and bottom align-content: space-around;
A flex item 1

align-content is how the items appear vertically in the container.

Item 2
Item 3 Once again fixed width 200px
evenly spaced across all margins align-content: stretch; Each item has width of 200px;
A flex item 1

align-content is how the items appear vertically in the container.

Item 2
Item 3 Once again fixed width 200px