Mixed writing modes

Flexbox makes it super easy to combine horizontal and vertical writing inside one flex container. All you have to do is set a different writing mode and/or direction of text on the desired flex items.

The flex container sets the main and cross directions.

Flexbox layout only cares about the main and cross directions set by the flex container. That’s set by flex-direction.

The values of writing-mode and direction of the flex container affect the main direction set by flex-direction. That’s because row and column are linked to the direction of writing, and the direction of writing is set by writing-mode and direction.

By default, writing-mode is horizontal-tb, which means “horizontal rows of text stacked from top to bottom”.

By default, direction is ltr, which means “text in a row goes from left to right”.

The flex container doesn’t care what writing mode flex items use.

You can set a different writing-mode or direction for one or more flex items to achieve different layouts. This doesn’t change anything as far as Flexbox layout is concerned.

For example, you might want to have a vertical header for a list item layout. All you have to do is set writing-mode: vertical-lr on that flex item and you’re done!

Flex items will be sized using properties that correspond to the main and cross directions.

But because properties like inline-size and block-size are relative to the writing mode of the box that they describe, a vertical flex items inline-size might correspond to the cross size of the flex container.