How do I wrap a flexbox row in Webflow?

Set flex on the parent, not on each card

Flexbox lays out elements in one direction, either across or down. The setting goes on the parent. Webflow calls that parent the flex parent and each direct child a flex child. The flexbox article says to select the element, open Style panel, Layout, Display, and click Flex.

Select the parent that holds the cards, on the canvas or in the Navigator. The help article uses a Box as the example. A section or an older div that already wraps the cards is the same kind of parent. Put Flex on that parent. Flex on a heading inside a card only affects what sits inside the heading.

By default, the children align to the left and sit in a horizontal row. Flex on a parent does not change the layout of elements nested inside those children. Style the inside of each card on its own.

Example: three service cards should sit side by side. Each card contains a photo, a heading, and one sentence. Select the wrapper around the three cards and set Display to Flex. Do not set Flex separately on each photo.

If the only goal is to center one heading, use the center an element guide. That page uses the align box. This page is the row that should move extra cards onto another line.

Choose Wrap down when the row runs out of room

Children try to stay on a single line, and they can overflow the parent if they do not fit. Open the wrap options from the parent: Style panel, Layout, Direction, then the dropdown next to that control.

For a left to right row, Wrap down moves children that would overflow onto a new line below. Wrap up moves them onto a line above. Start with Wrap down so the second line reads after the first, which matches the order on the page.

You can also reverse a row, from right to left or from bottom to top. Webflow's article says a reverse flips the visual order and does not change document order, so the visual order and the DOM order will not match. That can confuse visitors. Do not reverse the row just to make it wrap. Use Wrap down on the normal left to right direction.

Example: the three service cards fit on a wide desktop. On a narrower tablet width, the third card should move under the first two. Wrap down on the parent does that without a second layout, as long as each card is not wider than the parent.

Set the gap on the parent

Gap is the space between flex children. Select the flex parent and open Style panel, Layout, Gap. You do not have to add a right margin on every card.

Column gap and row gap are locked together by default. Change one and the other follows. Click the lock icon if the space between columns should differ from the space between wrapped rows. To nudge the value, drag the gap slider, or hold Option on Mac or Alt on Windows and drag across the column or row field.

Example: set the gap to 24 pixels with the lock on. The three cards separate by 24 pixels across, and a wrapped second line sits 24 pixels below. If the stacked line needs more air than the side gaps, unlock and raise only the row gap.

Margin still matters outside the row. Gap does not add space between the row and the next section. The margin and padding guide is that outer space. Use gap between the cards and margin on the parent when the whole row needs room.

Give each card a width that can fit

A child that is wider than the parent cannot sit on the line, even with wrap. Select a card and set a width smaller than the parent, such as 320 pixels, while you are on the desktop breakpoint. Three cards plus the gaps then decide whether the third card fits or wraps.

Webflow lets a flex child shrink, grow, or stay fixed. Under Style panel, Flex child, Sizing, Shrink if needed allows the card to get narrower when space is tight, down to its content. Don't shrink or grow keeps the width you set and will not squeeze the card, so wrap or overflow has to take the extra width. Grow if possible lets cards absorb leftover space in the parent.

On a phone, a 320 pixel card can still be wider than the screen. Switch to the smaller breakpoint, select the card, and set the width to 100%, or select the parent and set Direction to vertical so the cards stack. The mobile layout guide explains which breakpoint you are editing. A style you set on a smaller breakpoint does not have to change the desktop row.

Put the width on the card's class only if every card should share it. A shared class is why one width change can resize cards you were not looking at.

Publish and narrow the window

Preview in the Designer, then drag the canvas narrower, or click the smaller breakpoint. You want the third card to move down before any card is cut off by the edge of the screen.

Check this list before you publish:

• Flex is on the wrapper, not on the heading inside the card.
• Wrap down is the wrap option, and the row is not reversed.
• Gap, not a pile of right margins, separates the cards.
• No card is wider than its parent on the phone breakpoint.
• The heading and the button inside a wrapped card can still be read and tapped.

Publish and open the live page. Narrow the browser until the row wraps. If a horizontal scrollbar appears, a fixed width is still wider than the screen. Set that width to 100% on the phone breakpoint, publish again, and scroll the page sideways once to confirm the bar is gone.