- Where to find it
- Labelled Vertical Alignment 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
alignItems
In plain English
This is the column equivalent of the row's Vertical Alignment. It lines children up on the cross axis — usually top to bottom when Flex Direction is "row".
Setting it turns the column into a flex container automatically.
What each option does
| Option | What you will see |
|---|---|
flex-start | Children pin to the start of the cross axis. |
center | Children centred on the cross axis. |
flex-end | Children pin to the end of the cross axis. |
baseline | First lines of text sit on a shared baseline. |
stretch | Children stretch to fill the cross size. |
When you would use it
- Items inside a flex column have different heights and look ragged.
How to change it
- Select the column, open "Selected Column", then "Vertical Alignment".
- Click a diagram. The selected one is outlined in green.
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
- To align whole columns against each other in a row, use Entire Row → Vertical Alignment instead.
Related settings
- Horizontal Alignment
- Align Content
- Flex Direction
- Vertical Alignment
- Using a CSS variable instead of a typed value
For developers
The technical reference for what this setting produces: MDN: align-items. 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.