Aligning Flex Items with CSS

Flex items can be aligned collectively as the children of the containing flex container or individually within it. Alignment can be along the inline/row and cross/column axes, and the properties used to achieve these goals are justify-content, align-content, align-items, and align-self, which are part of the set of generic alignment properties, known as box alignment properties, used for aligning elements’ boxes.

1. Aligning All Flex Items in a Flex Container

The properties for specifying the alignment for all the flex items contained in a flex container are justify-content, align-content, and align-items, all of which are specified only in the rule for the flex container since they are designed to affect all its content.

1.1. justify-content

The justify-content property aligns flex items along the main axis of the current flex line (e.g., along the horizontal axis in a horizontal writing mode), using the space available after the space needed for flexible lengths and auto margins (margins with auto value) has been allocated. It basically controls how leftover space is distributed between flex items along the main axis. This means that if even one flex item has an indefinite need for space (e.g., flex-grow value that is greater than 0), the property will have no effect, because the item will take up all extra space and there will be no leftover. It is non-inherited and the values it supports are listed in Table 19.5. Figure 19.11 illustrates the effects of the values and Figure 19.12 shows example usage of the property.

In the #flex-container{} rule in the example, the border property makes the border of the <div> element of id=“flex-container” 1px-thick black solid line, the display property makes the element a flex container, and justify- content says to lay out the elements (flex items) in the container according to the rules of the flex-start value described in Table 19.5. The #flex-container div{} rule styles the <div> elements (flex items) inside the flex container, specifying the size, background color, and the thickness, style, and color of the border.

1.2. align-content

The align-content property aligns flex lines in a multi-line flex container when there is enough space in the cross axis (e.g., enough vertical space in horizontal writing mode). It does this in a similar way that the justify- content does it along the main axis. The property has no effect on a singleline container. This means that flex line must be longer than the flex container (and the flex-wrap property used to wrap the line) in order for the property to have an effect. It is non-inherited and the values supported are listed in Table 19.6. Figure 19.13 shows their effects.

Figure 19.14 shows an example of how the align-content property is used. In the #flex-container{} rule, the width and height properties specify the size of the <div> element of id=“container”, the border property makes its border 1px-thick black solid line, display makes it a flex container, flex- wrap says to wrap lines of items to the next line when necessary, and align- content says to align lines of items according to the rules of the flex-start value, as described in Table 19.6. The #container div{} rule styles the <div> elements (i.e., flex items) inside the flex container, specifying the size, background color, the thickness, style, and color of the border, and the roundness of the elements’ corners.

1.3. align-items

The align-items property aligns all items in a flex container in the cross axis of the current line of the container. This means, for example, that if the main axis is in the horizontal direction, items are vertically aligned. The property is non-inherited and Table 19.7 lists the values it supports. Figure 19.15 shows the effects of the values, and Figures 19.16 and 19.17 show an example of how it is used.

In the example, the #container{} rule specifies the size of the <div> element of id=“container”, styles its border (making it 1px-thick black solid line), makes the element a flex container, and says to place the flex items vertically in the center of the container. The #container div{} rule specifies the width of the <div> elements (i.e., flex items) inside the <div> element of id=“container” (i.e., flex container) and also styles their borders. The #container .one{}, #container.two{}, #container .three{}, and #container.four{} rules specify the background color and padding for each of the flex items. Notice that the content of the first and last flex items is a space ( ). This is to give them height because without content, a box collapses into a line.

2. Aligning Flex Items Individually

Individual flex items are aligned using the align-self property, which performs the same function as the align-items property, except that it applies to only an individual item rather than all the items in the flex container. It aligns an item as specified, overriding the value of the align- items property. If an item has its cross-axis margins (i.e., top and bottom margins in horizontal writing mode) set to auto, the property has no effect. The item is simply centered in the cross axis of the current flex line. The property is non-inherited and the values it supports are listed in Table 19.8. Figures 19.18 and 19.19 show an example of how it is used.

In the #container{} rule in the example, the width and height properties specify the size of the <div> element of id=“container”, the border property makes the border 1px-thick solid line and black, the display property makes the element a flex container, and align-items vertically stretches all flex items to the full height of the container. The #container div{} rule specifies the width of the <div> elements (i.e., flex items) inside the <div> element of id=“container” (i.e., flex container) and also styles their borders. The #container .one{} rule makes the background color of the <div> element of class=“one” pink, specifies the padding for the edges, and aligns it flush with the top edge of the flex container, overriding the value specified by the align-items property in the #container{} rule. The #container .two{} and #container .three{} rules specify the background color and padding for the <div> element of class=“two” and the <div> element of class=“three”, respectively. The #container .four{} rule specifies the background color and padding for the <div> element of class = “four” and aligns the element flush with the bottom edge of the flex container.