In a CSS flex container, what are the main axis and the cross axis, and what changes when flex-direction is set to column?

## One axis at a time Flexbox is a one-dimensional layout system: it arranges items along a single line at a time. `flex-direction` decides which direction that line runs, and everything else in the model is defined relative to it. - `row` (the initial value): the main axis is horizontal; items are placed left to right in a standard left-to-right horizontal writing mode. - `row-reverse`: still horizontal, but placement starts from the opposite end. - `column`: the main axis is vertical; items are placed top to bottom. - `column-reverse`: vertical, starting from the bottom. The **cross axis** is always perpendicular to the main axis. It is not "the vertical one" — it is vertical only for as long as the main axis is horizontal. ## The four edges Each axis has two edges: main-start and main-end, cross-start and cross-end. Items are packed from main-start toward main-end; when wrapping is enabled, the resulting lines stack from cross-start toward cross-end. Every keyword ending in `-start` or `-end` names one of these edges rather than a physical side, which is precisely why `justify-content: flex-start` pushes items to the **top** of a `column` container. ## Which property follows which axis | Property | Axis | Declared on | | --- | --- | --- | | `justify-content` | main | container | | `align-items`, `align-self` | cross | container, item | | `align-content` | cross (stacking of wrapped lines) | container | | `flex-grow`, `flex-shrink`, `flex-basis` | main | item | The naming is a dependable mnemonic: `justify-*` acts on the main axis, `align-*` acts on the cross axis, and the `flex-*` sizing properties always size the main dimension. ## What flex-direction: column actually changes In a horizontal writing mode, switching a container from `row` to `column`: - makes `justify-content` move items up and down instead of left and right; - makes `align-items` move items left and right instead of up and down; - makes `flex-basis` and shorthands like `flex: 1` distribute **height**, because an item's main size is now its height; - means the default cross-axis stretch now stretches items to the container's **width** rather than its height; - makes `flex-wrap: wrap` create new columns rather than new rows. Nothing else changes. The container is still a block-level box, the children are still flex items, and no additional dimension of layout has appeared — a column flex container is still one-dimensional. ## The classic bug Someone centres a toolbar with `justify-content: center`, later switches the container to `column` at a small breakpoint, and the horizontal centring vanishes. The declaration did not stop working: it still centres on the main axis, and the main axis is now vertical. The property that now controls horizontal position is `align-items`. ```css .stack { display: flex; flex-direction: column; align-items: center; /* horizontal — cross axis */ justify-content: center; /* vertical — main axis */ } ``` A second, closely related surprise: main-axis distribution in a `column` container often looks like it does nothing. That is because a block-level container's height is content-based, so there is no free space on the vertical main axis to distribute. Give the container a `height`, a `min-height`, or make it a flex item that grows, and the same declaration starts behaving. ## Main size and cross size The specification talks about an item's *main size* and *cross size* rather than width and height, because which physical dimension those map to depends on `flex-direction`. In a row container, `width` is the main size — the flex algorithm may grow or shrink it — and `height` is the cross size. In a column container the roles swap: `width` becomes the cross size and is left to ordinary sizing and stretching, while `height` is what `flex-grow` and `flex-shrink` negotiate. This is why a fixed `width` on an item behaves so differently in the two directions. ## The reverse values `row-reverse` and `column-reverse` swap main-start with main-end. Items are laid out from the far end, and main-axis alignment follows them, so `flex-start` in a `row-reverse` container is the right-hand edge. What they do **not** change is the document: DOM order, painting order and keyboard focus order all stay in source order, so a reversed visual sequence no longer matches the order a keyboard or screen-reader user encounters. They also flip which edge overflowing content spills toward, which is a common source of confused scroll behaviour. ## Axes are relative, not physical One last framing that pays off later: `row` and `column` are defined against the container's inline and block axes, not against the screen. Change the writing direction and the physical meaning of `row` changes with it — which is exactly what makes flex-relative keywords worth using instead of hardcoded sides.