justify-content controls alignment along the main axis, while align-items affects the cross axis. 1. justify-content aligns items horizontally when flex-direction is row and vertically when column, using values like flex-start, center, space-between, etc. 2. align-items aligns items vertically when flex-direction is row and horizontally when column, with values such as flex-start, center, baseline, and stretch. 3. The key difference lies in the axis each property affects, where justify-content works on the main axis and align-items on the cross axis, causing their roles to visually swap when flex-direction changes from row to column.

When working with CSS Flexbox, justify-content and align-items are two commonly used properties that control how flex items are aligned within a flex container. While they both deal with alignment, they affect different axes and serve distinct purposes.

justify-content: Controls Alignment Along the Main Axis

This property aligns flex items along the main axis — the direction set by the flex-direction (which can be row, row-reverse, column, or column-reverse). In other words, it handles horizontal alignment when flex-direction: row, and vertical alignment when flex-direction: column.

• Common values include:
  • flex-start (default): items are packed toward the start of the container
  • flex-end: items are packed toward the end
  • center: items are centered
  • space-between: first item at start, last at end, others spaced evenly in between
  • space-around: space is distributed around each item
  • space-evenly: space is distributed evenly between and around items

For example, if you have a horizontal flex container and want to center your buttons, you’d use justify-content: center.

align-items: Controls Alignment Along the Cross Axis

This one works on the cross axis, which is perpendicular to the main axis. So if your flex items are laid out horizontally (flex-direction: row), align-items controls vertical alignment. If the direction is vertical (flex-direction: column), then it affects horizontal alignment.

• Common values include:
  • stretch (default): items stretch to fill the container
  • flex-start: items align to the cross axis start
  • flex-end: items align to the cross axis end
  • center: items are centered along the cross axis
  • baseline: align items based on their text baseline

A common use case might be vertically centering content inside a flex container. You'd use align-items: center for that.

Key Difference: Axis Matters

The biggest difference between these two lies in the axis they affect:

• justify-content → Main axis
• align-items → Cross axis

So, if you're setting flex-direction: row, then:

• justify-content moves items left/right
• align-items moves them up/down

But if you change flex-direction: column, their roles effectively swap in terms of visual direction.

That’s basically how they differ. It's not complicated once you keep the axis in mind, but it’s easy to mix them up if you’re not thinking about the current flex direction.

The above is the detailed content of What is the difference between justify-content and align-items?. For more information, please follow other related articles on the PHP Chinese website!