Horizontal Alignment

Where the columns sit across the row, and how any leftover space between them is shared out.

Where to find it
Labelled Horizontal Alignment in the "Entire Row" section of the Modify drawer.
Per device
No — this setting has a single value that applies on every screen.
Underlying CSS
justifyContent

In plain English

When the columns in a row do not fill the whole width, there is space left over. Horizontal Alignment decides what happens to it.

The first three options push all the columns to one place and leave the spare space in a single block: to the left, in the centre, or to the right. The last three keep the columns where they are and distribute the spare space between them instead, which is how you get evenly spread items without touching a single margin.

The difference between the three distributing options is what happens at the ends. "space-between" puts nothing at the outer edges, so the first column touches the left wall and the last touches the right. "space-around" gives each column an equal share of space on both sides, which makes the outer gaps look half the size of the inner ones. "space-evenly" makes every gap identical, including the two at the ends.

This is the setting to reach for when you want a column centred in the page. Text Align centres the words inside a column; this centres the column itself.

What each option does

OptionWhat you will see
flex-startAll columns pushed to the left, spare space on the right.
centerAll columns grouped in the middle, spare space split evenly at both ends. The usual way to centre a column.
flex-endAll columns pushed to the right, spare space on the left.
space-betweenFirst column hard left, last column hard right, spare space shared equally between them. Best for a navigation bar.
space-aroundEqual space on both sides of every column, which makes the two outer gaps look half as wide as the inner ones.
space-evenlyEvery gap identical, including the ones at the two ends. The most visually even option.

When you would use it

  • A single column should be centred in the page.
  • A logo on the left and a menu on the right: use "space-between".
  • Three feature cards should be spread evenly across the row: use "space-evenly".

How to change it

  1. Click any column in the row, then open "Entire Row" in the Modify drawer.
  2. Open "Horizontal Alignment" and click one of the six diagrams. The selected one is outlined in green.
  3. Watch the canvas — the effect is immediate and easiest to understand by trying each option.

Watch out for

  • If the columns already fill the row there is no spare space, so nothing appears to change. Give a column a Max Width first and the alignment becomes visible.
  • This moves the columns. To move the text inside a column, use Text Align.
  • When columns wrap onto a second line (see Flex Wrap), this alignment applies to each line independently.

Related settings

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