Design system · Component review 11

Demo axes

Axis annotations should explain the direction of the actual layout without becoming flex items. This review uses a left-to-right row, where the main axis points right and the cross axis points down.

Approved default direction: the shared DemoAxes uses the refined frame. For vertical or reversed layouts, the arrows and labels must follow the actual writing mode and flex direction.

Horizontal flex layout

Each treatment shows the same three items and the same real flex direction. Labels are outside the teaching layout.

01

Original Guide

Labels beside the composition

Row layout · main axis left to right
01
02
03

The original Guide uses attached labels to identify a composition. It does not have a reusable axis frame.

02

Previous

Earlier shared DemoAxes

Main axis
Cross axis
01
02
03

The existing small labels and arrows sit outside the flex items, but the one-pixel lines and text are difficult to scan.

03

Adopted

Directional annotation frame

Main axis
Cross axis
01
02
03

An aligned pair of rules makes the two axes distinct. The line and arrow remain decorative; text names the directions.

Actual Reference use

The flex-direction reference demonstrates the same row direction and explains why writing mode matters.

Open /reference/flex-direction
Lay out items in a row
The annotation follows the actual layout. In horizontal writing, inline runs across the row and block runs down the column.

The Reference demo uses real flex flex-row classes. An arrow is only correct here because this specimen uses horizontal writing and left-to-right text.