Flex Wrap Setting

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

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

In plain English

Picture four cards in a row on a desktop screen, then imagine that screen narrowing to a phone. Something has to give, and this setting decides what.

With "wrap", the cards that no longer fit move down onto a new line, like words wrapping in a paragraph. Each card keeps a sensible width and the row simply gets taller. This is what you want almost every time, and it is the foundation of a layout that works on a phone without you writing separate rules for it.

With "nowrap", every card stays on the single line and they all squeeze thinner to make room. Four cards that were comfortable become four slivers. Reserve it for rows where staying on one line genuinely matters.

One thing to be aware of while you work: wrapping is deliberately switched off in the editing canvas, so you can always see every column laid out side by side and click the one you want. The setting takes effect in preview mode and on the published page.

What each option does

OptionWhat you will see
nowrapColumns stay on one line and compress to fit. The row height does not change. Columns may end up very narrow.
wrapColumns that no longer fit move onto a new line. Each keeps a sensible width and the row grows taller.

When you would use it

  • A row of three or four cards should stack neatly on a phone: choose "wrap".
  • A logo and a menu must stay on one line at every width: choose "nowrap".
  • Combine "wrap" with a Min Width on each column to control exactly when the wrapping happens.

How to change it

  1. Click any column in the row, then open "Entire Row" in the Modify drawer.
  2. Open "Flex Wrap Setting" and choose "nowrap" or "wrap". The selected option is outlined in green.
  3. Switch to preview mode and narrow the window to see it work — the editing canvas never wraps.

Watch out for

  • Nothing wraps while you are editing. This is intentional, so that every column stays clickable. Always confirm the behaviour in preview.
  • "wrap" on its own does not say where the break should happen. Give each column a Min Width or a percentage Width to control that.
  • "nowrap" on a row with several columns is the most common cause of unreadably narrow content on phones.

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