Cross Axis Alignment

When you want to control how items are aligned along the cross axis in a flex container, you use the align-items property. This property determines how the flex items are positioned vertically (if your flex direction is row) or horizontally (if your flex direction is column) within the container.

The most common values for align-items are:

• flex-start: aligns items to the start of the cross axis;
• flex-end: aligns items to the end of the cross axis;
• center: centers items along the cross axis;
• stretch: stretches items to fill the container (default behavior);
• baseline: aligns items so their text baselines line up.

In the example above, the container uses align-items: flex-end, which means all items are aligned to the bottom of the container—the end of the cross axis.

No matter what their heights are, the items' bottoms line up with the container's bottom edge.

If you change align-items to center, the items will be vertically centered inside the container.

For containers that wrap onto multiple lines, the align-content property lets you control the spacing and alignment of the lines themselves along the cross axis.

In this example, align-content: space-around distributes multiple lines of items along the cross axis, adding space above, between, and below the rows.

Key Difference

• align-items controls how items are aligned within a single line;
• align-content controls how multiple lines are spaced when wrapping is enabled.

If there is only one line of items, align-content has no visible effect.