HTML and CSS Reference
Table 22-3. Flex Alignment Properties
Aligns flex items along the main axis of the current line of the
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.
Sets the default alignment for flex items on the cross axis.
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
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).
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).