What Next? - Beginning CSS3 - page 498

Table 22-3. Flex Alignment Properties

Property Initial Value Description

justify-content flex-start Aligns flex items along the main axis of the current line of the

flex container.

align-content stretch Aligns the flex container's rows or columns within the flex

container if there is any extra space on the cross axis. Applies
only to multiple-row or multiple-column flex containers.

align-items stretch

Sets the default alignment for flex items on the cross axis.

align-self auto Overrides align-items for individual flex items.

The justify-content property accepts the following values:
flex-start Flex items are packed toward the start of the main axis. Each item is placed
flush with the next. This is the default.
flex-end Flex items are packed toward the end of the main axis flush against each
other.
center Flex items are packed flush against each other in the center of the row or
column with equal free space at both ends. If the items overflow, they overflow by an
equal amount at both ends.
space-between Flex items are spread evenly along the main axis with the first item
flush against the main-start edge and the last one flush against the main-end. If items
overflow or there's only one item, this value is equal to flex-start .
space-around Flex items are distributed evenly with half-size spaces at each end of the
axis. If they overflow or there's only one item, this is equal to center .

Figure 22-29 shows an example of each value on a single-row flex container (the code is in justify-content.html).

flex-start

flex-end

center

space-between

space-around

Figure 22-29. Aligning flex items along the main axis with justify-content

To distribute free space on the cross axis in a multiple-row or multiple-column flex container, use
align-content , which accepts the same values as justify-content , but applies them to the cross axis rather
than the main axis. It also accepts the following value:

stretch This is the default. Free space is split equally between all rows or columns
increasing their cross size. If there is insufficient space, it has the same value as flex-start .
Figure 22-30 shows the effect of the different values for align-content on a multiple-row flex container with
a fixed height (the code is in align-content.html).