Contents

Align Content

How multiple wrapped lines of columns pack from top to bottom inside the row.

Where to find it
Labelled Align Content in the "Entire Row" 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

Align Content decides what happens when Flex Wrap has created two or more lines and the row is taller than those lines need.

New edits are stored per device on the row; classic alignContent fields still work as a fallback.

What each option does

OptionWhat you will see
flex-startWrapped lines pack at the top of the row.
centerWrapped lines pack in the vertical middle of the row.
flex-endWrapped lines pack at the bottom of the row.
space-betweenFirst line at the top, last at the bottom, spare space shared between lines.
space-aroundEqual space on both sides of every wrapped line.
space-evenlyEvery gap between wrapped lines is identical, including the ends.
stretchWrapped lines stretch to fill the row height.

When you would use it

  • A wrapping card row sits in a tall band and the second line should not jam under the first.

How to change it

  1. Set Flex Wrap to "wrap" first.
  2. Open "Align Content" and click a diagram. Confirm in preview.
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 columns, 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