What CSS property sets the main axis direction in a flex container?

The CSS property that sets the main axis direction in a flex container is flex-direction. Flexbox arranges items along two axes: the main axis and the cross axis. The flex-direction property determines whether the main axis runs horizontally or vertically, and it also establishes the direction in which flex items are placed.

Its four standard values are row, row-reverse, column, and column-reverse. row is the initial value and usually places items from left to right, although writing direction can affect the physical sides. column stacks items vertically. The reverse values switch the starting side without changing the basic axis.

A common mix-up is flex-flow, which is a shorthand combining flex-direction with flex-wrap. The justify-content property aligns items along the main axis, while align-items generally handles the cross axis; neither one chooses the axis itself.

Flexbox became a major CSS layout model because it made one-dimensional alignment and responsive spacing easier than older float-based techniques. For two-dimensional layouts involving rows and columns together, CSS Grid is often the better neighboring tool.