The main axis in Flexbox is determined by the flex-direction property, running horizontally with row and vertically with column, while the cross axis is always perpendicular to it. The main axis is the direction in which flex items are laid out, set using flex-direction: row (horizontal) or flex-direction: column (vertical). The cross axis is perpendicular to the main axis—vertical when the main axis is horizontal, and horizontal when the main axis is vertical. Justify-content aligns items along the main axis, controlling horizontal alignment with row and vertical alignment with column, with values like flex-start, center, space-between, and space-around. Align-items aligns items along the cross axis, affecting vertical alignment with row and horizontal alignment with column. Align-self overrides align-items for individual items on the cross axis, and align-content adjusts spacing between multiple lines of items on the cross axis when flex-wrap is used.

When working with Flexbox, you’ll often hear terms like main axis and cross axis. Understanding the difference between them is key to controlling how elements align and distribute space inside a flex container.

The main axis is the primary direction in which flex items are laid out. It’s defined by the flex-direction property. If you set flex-direction: row, the main axis runs horizontally. If you use flex-direction: column, the main axis runs vertically.

The cross axis, on the other hand, is perpendicular to the main axis. So if your main axis is horizontal (row), the cross axis will be vertical — and vice versa.

Once that’s clear, the rest of Flexbox makes a lot more sense. Let’s break it down further with some practical points.

How justify-content works along the main axis

This property aligns items along the main axis. Think of it as adjusting spacing and positioning in the direction your flex items flow.

• If you’re using flex-direction: row, justify-content controls horizontal alignment.
• With flex-direction: column, it affects vertical alignment.

Common values include:

• flex-start (default): items line up at the start
• center: centered within the container
• space-between: first and last items stick to edges, others spaced evenly
• space-around: each item gets equal space around it

So if your items aren’t lining up the way you expect, double-check both flex-direction and justify-content.

Aligning items with align-items on the cross axis

Now this one trips people up sometimes. The align-items property works across the cross axis, meaning it adjusts how items are positioned in the opposite direction of the main axis.

Let’s say you're using flex-direction: row. In that case:

• Main axis = left to right
• Cross axis = top to bottom
  So align-items will affect vertical alignment.

If you switch to flex-direction: column, the cross axis becomes horizontal, and align-items now affects horizontal alignment.

Try setting align-items: center for nicely centered content — just keep in mind that its effect changes based on the flex direction.

What about align-self and align-content?

These two are worth mentioning because they also relate to the cross axis.

• align-self: overrides align-items for individual items. You can shift one item differently from the rest across the cross axis.
• align-content: only matters when there are multiple lines in a flex container (flex-wrap: wrap). It controls how those lines are spaced along the cross axis.

Both give you finer control, but they only work if your layout actually has room to adjust — like wrapping items or varied heights/widths.

At this point, you should have a better feel for how the main and cross axes shape layout behavior in Flexbox. Once you get used to how flex-direction sets the main axis and everything else flows from that, these properties become much easier to use.

You don't need to memorize every detail — just remember:

• Main axis = direction of flow
• Cross axis = the perpendicular direction
  And from there, justify-content works on the main, align-items on the cross.

That’s basically it.

The above is the detailed content of What is the difference between the main axis and the cross axis in Flexbox?. For more information, please follow other related articles on the PHP Chinese website!