Flexbox: What's the Difference Between `align-items` and `align-content`?

Flexbox: Understanding the Differences Between align-content and align-items

When it comes to flexbox layout, align-items and align-content properties serve distinct purposes in aligning content within flex containers.

align-items

align-items aligns elements along the cross axis of the flex container. This cross axis is perpendicular to the direction of the main axis, which is determined by the flex-direction property. By default, flex-direction: row, so the main axis is horizontal, and the cross axis is vertical.

align-items can have various values to align elements vertically: start, end, center, stretch, and baseline.

align-content

In contrast, align-content aligns lines of elements within a multi-line flex container. When there is only one line of elements, align-content has no effect. This property comes into play when multiple lines are formed due to limited container width.

align-content also takes various values:

• flex-start: Lines of elements align to the top of their containing space
• flex-end: Lines of elements align to the bottom of their containing space
• center: Lines of elements align vertically in the center of their containing space
• space-between: Lines of elements distribute evenly along the vertical axis with gaps between them
• space-around: Lines of elements distribute evenly along the vertical axis with gaps both before and after them

Example

Consider the following code:

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

In this example, align-items: center aligns the child elements vertically in the center of their containing space, which is the item. align-content: space-around aligns the lines of elements vertically, with gaps between and after them. The result is a vertically centered row of elements with gaps between each line.

The above is the detailed content of Flexbox: What's the Difference Between `align-items` and `align-content`?. For more information, please follow other related articles on the PHP Chinese website!