- Where to find it
- Labelled Flex Direction in the "Selected Column" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
flexDirection
In plain English
Flex Direction chooses whether children run left-to-right, top-to-bottom, or in reverse.
Setting it turns the column into a flex container automatically. Horizontal and Vertical Alignment then follow that main axis.
What each option does
| Option | What you will see |
|---|---|
row | Main axis left to right (default flex behaviour). |
row-reverse | Main axis right to left. |
column | Main axis top to bottom. |
column-reverse | Main axis bottom to top. |
When you would use it
- Stack children vertically inside a column without nesting another row.
- Reverse visual order without reshuffling content.
How to change it
- Select the column, open "Selected Column", then "Flex Direction".
- Click a diagram.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.
Watch out for
- Changing direction swaps what Horizontal Alignment and Vertical Alignment control.
Related settings
For developers
The technical reference for what this setting produces: MDN: flex-direction. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.