What Next? - Beginning CSS3 - page 499

flex-start space-between

flex-end space-around

center stretch

Figure 22-30. Aligning rows along the cross axis in a multiple-row flex container

The align-items property controls the alignment of flex items in the current row or column of a flex
container, and is applied to the container.
The align-self property is applied to individual flex items, and overrides align-items . Both properties
accept the following values:

flex-start The item's cross-start edge is flush with the container's cross-start.
flex-end The item's cross-end edge is flush with the container's cross-end.
center The item is centered on the cross axis. If it's too big, it overflows equally in both
directions.

baseline The text baseline of each item is aligned with the baseline of the item with
the largest font size.
stretch This is the default for align-items . The item stretches to fill the current row
or column unless prevented by minimum and maximum width or height.
The align-self property also accepts the following value:
auto This is the default for align-self . It inherits the value of the parent's
align-items property. If the item has no parent, it defaults to stretch .
Figure 22-31 shows the different values for align-items (the code is in align-items.html).