Setting main direction

Flex item boxes grow and shrink in the main direction

The heart of Flexbox layout is the ability for the flex item boxes to say if they’d like to grow or shrink inside the space offered to them by the flex container. This growing and shrinking happens in one direction. That direction is called the main direction.

The flex container sets the main direction with flex-direction

The value of the flex-direction property set on the element whose box is a flex container determines the main direction.

The initial value of flex-direction is row. row means “the direction in which words go in a row of text”. If you’re writing in English, that direction is left to right. If you’re writing in Arabic, that direction is right to left.

Think main and cross, forget horizontal and vertical

Flexbox does not care about terms from the physical world like top, left, width, or height. It doesn’t even care about terms from a writing-mode-relative world like inline, block, or inline-start.

All that Flexbox cares about are Flexbox-world terms like main, cross, and main-start.

The reason is that sometimes you want a bunch of boxes to be stacked in one direction or another, but you want to use the terms no matter which direction you choose.

For example, imagine you want to lay out a list of 3 cards. The list is your flex container, and each card is a flex item. You can have the list insert a gap between the cards. You can distribute the cards inside the list. You can have the cards say if they want to grow. None of this requires knowing anything about the physical world, or the direction of writing.

What row and column mean

• The default row means the direction of words in a row of text

• column means the direction in which rows of text stack in a column of text.

flex-direction values mean different things depending on the direction of writing

writing-mode sets the inline dimension (horizontal or vertical) and the block direction (top to bottom, left to right, right to left).

direction sets the inline direction (logical left to right, logical right to left).

flex-direction sets the main direction and the cross dimension.