justify-content controls alignment along the main axis while align-items works on the cross axis. 1. justify-content aligns items horizontally when flex-direction is row, with values like flex-start, flex-end, center, space-between, and space-around. 2. align-items handles vertical alignment in a row layout, using values such as flex-start, flex-end, center, stretch, and baseline. 3. Together, they enable two-dimensional centering, like horizontally and vertically centering items by combining justify-content: center and align-items: center. 4. The roles of these properties switch when flex-direction changes to column, making justify-content affect vertical alignment and align-items handle horizontal alignment.

When working with Flexbox, two of the most commonly used properties for alignment are justify-content and align-items. They both control how flex items are aligned, but they do so along different axes — which is the key difference between them.

justify-content aligns items along the main axis

This property deals with the main axis of the flex container. The main axis depends on the direction set by flex-direction, which could be horizontal (row or row-reverse) or vertical (column or column-reverse).

Common values include:

• flex-start (default): Items are packed toward the start of the main axis.
• flex-end: Items are packed toward the end of the main axis.
• center: Centers items along the main axis.
• space-between: Distributes items evenly, with the first item at the start and the last at the end.
• space-around: Items have equal space around them.

For example, if you're using flex-direction: row, then justify-content controls horizontal alignment.

.container {
  display: flex;
  justify-content: center; /* centers items horizontally */
}

align-items aligns items along the cross axis

While justify-content works on the main axis, align-items affects alignment on the cross axis, which is perpendicular to the main axis.

So again, if your flex container uses flex-direction: row, the cross axis becomes vertical, and align-items controls vertical alignment.

Common values include:

• flex-start: Aligns items to the top of the cross axis.
• flex-end: Aligns items to the bottom.
• center: Centers items vertically (in the case of a row layout).
• stretch (default): Items stretch to fill the container.
• baseline: Aligns items based on their text baseline.

Here’s an example:

.container {
  display: flex;
  align-items: center; /* centers items vertically when flex-direction is row */
}

When they work together

You often use both properties together to fully control alignment in two dimensions. For instance, centering a group of items both horizontally and vertically is as simple as:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

This setup is super common for centering content inside a full-screen section or modal.

It's important to remember that changing flex-direction will affect what "main" and "cross" mean. So if you switch to column, justify-content will affect vertical alignment and align-items will affect horizontal alignment.

That’s the core difference — basically, one works on the main axis, the other on the cross. Once you get the hang of how each axis behaves under different flex directions, these two properties become second nature.

The above is the detailed content of How do Flexbox properties `justify-content` and `align-items` differ?. For more information, please follow other related articles on the PHP Chinese website!