- Where to find it
- Labelled Align Content 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
alignContent
In plain English
Same idea as the row's Align Content. It only matters when Flex Wrap has created more than one line and the column is taller than those lines need.
Setting it turns the column into a flex container automatically.
What each option does
| Option | What you will see |
|---|---|
flex-start | Wrapped lines pack at the start. |
center | Wrapped lines pack in the middle. |
flex-end | Wrapped lines pack at the end. |
space-between | First line at one end, last at the other. |
space-around | Equal space on both sides of every line. |
space-evenly | Every gap between lines is identical. |
stretch | Lines stretch to fill the column. |
When you would use it
- Wrapped lines inside a tall column should sit mid-way, not jammed at the top.
How to change it
- Set Flex Wrap to "wrap" first.
- Open "Align Content" and 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
- With a single line of children, Align Content has nothing to arrange.
Related settings
For developers
The technical reference for what this setting produces: MDN: align-content. 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.