Can I limit the width of a row in Webflow flexbox so that additional divs move to a second row?
TL;DR
- Set a max width on the flex container and enable wrapping in the Layout settings.
- Assign fixed or percentage widths to child divs to control how many fit per row, and use margins for spacing if needed.
You can limit the width of a flex container in Webflow to force additional items (like divs) to wrap onto a second line when they exceed the available space.
1. Set Flex Container Width
- Select the parent flex container in the Webflow Designer.
- In the Style panel, set a maximum width using either pixels (e.g., 600px) or percentages (e.g., 80%).
- You can also center the container using margin: auto on left and right if needed.
2. Enable Wrapping
- With the flex container still selected, scroll to the Layout section.
- Set Display to Flex, then set Wrap to Wrap (not “No Wrap”).
3. Size Flex Children Responsively
- Make sure the child divs have a defined width (e.g., 200px) that allows them to be wrapped.
- Avoid “Shrink if needed” unless you want flexible resizing instead of wrapping.
- You can use percentage widths (like 30% or 48%) to better control how many fit per row.
4. Use Gutters If Needed
- Add margin between child divs if you want spacing between the wrapped items.
- Be cautious: large fixed margins can also trigger wrapping earlier than expected.
Summary
To wrap flex items onto a second row in Webflow, set a max width on the flex container, enable wrapping, and control the width of child divs. This approach gives you full control over when and how flex items wrap.