Contents

Flex Wrap Setting

Whether children that no longer fit wrap onto a new line, or stay on one line and squeeze.

Where to find it
Labelled Flex Wrap Setting 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
flexWrap

In plain English

Same idea as the row's Flex Wrap Setting, but for children inside this column.

Setting it turns the column into a flex container automatically.

What each option does

OptionWhat you will see
nowrapChildren stay on one line and may compress.
wrapChildren that no longer fit move onto a new line.

When you would use it

  • A row of chips or tags inside a column should stack on narrow widths.

How to change it

  1. Select the column, open "Selected Column", then "Flex Wrap Setting".
  2. Click "nowrap" or "wrap".
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

  • Align Content only has an effect when wrap is on and there are multiple lines.

Related settings

For developers

The technical reference for what this setting produces: MDN: flex-wrap. 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