Flexible Box Layout 195
Figure 15-11: Alignment on the cross axis is controlled with different values for
align-items: stretch (left), flex-end (middle), and center (right).
Notice that with no explicit width set, the flex items in the second and
third columns are sized only to the width of their content, and then aligned
within the container based on its align-items value.
Cross-Axis Alignment with align-self xiv Contents in Detail
To control the cross-axis alignment of individual items, use the align-self
property. This property applies to the item, not the container. The values are
the same as for align-items, and they have the same effects on the selected
item only; sibling items are unaffected.
For example, in the following listing, element #c has a different value
than its siblings:
.container { align-items: flex-end; }
#c { align-self: flex-start; }
The effect (using the default row direction) is shown in Figure 15-12.
Figure 15-12: Flex item #c is aligned differently from its siblings because of the align-self
propert y.
