- Where to find it
- Labelled Horizontal 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
justifyContent
In plain English
This is the column equivalent of the row's Horizontal Alignment. It decides how leftover space is shared among the column's children along the main axis (usually left to right when Flex Direction is "row").
Setting this — or Vertical Alignment, Flex Wrap, Align Content, or Flex Direction — turns the column into a flex container automatically. You do not set Display yourself.
What each option does
| Option | What you will see |
|---|---|
flex-start | Children pack to the start of the main axis. |
center | Children group in the middle. |
flex-end | Children pack to the end of the main axis. |
space-between | First and last touch the ends; spare space shared between them. |
space-around | Equal space on both sides of every child. |
space-evenly | Every gap identical, including the ends. |
When you would use it
- A column holds several items and you want them centred or evenly spread.
How to change it
- Select the column, open "Selected Column", then "Horizontal Alignment".
- Choose same value for all resolutions, or set phone / tablet / desktop separately.
- Click a diagram. The selected one is outlined in green. Click again to clear.
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
- This arranges children inside the column. To move the column within its row, use Entire Row → Horizontal Alignment.
- Gap alone does not make the column a flex container. Set a flex layout control like this one first.
Related settings
- Vertical Alignment
- Flex Wrap Setting
- Flex Direction
- Gap
- Horizontal Alignment
- Using a CSS variable instead of a typed value
For developers
The technical reference for what this setting produces: MDN: justify-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.