Streaming live at 10am (PST)

Rows in Flexbox

I created a flexbox section>div and set it up so that that div has product information. I then copied/pasted to get a second div block and then a third.

I want the fourth to start a separate row so that by the time I get to twelve, there will be four rows of three.

However, no matter what I do, the additional divs keep expanding in the same row.

Is there a way to limit the width of the row in a flexbox, so that any additional content flows over to a second row?



Here is my public share link: LINK
(how to access public share link)

Hi @alchait!

Hope this helps:

  1. By default a flex container is single-row, if you want items inside it to wrap onto multiple lines, you need to enable the “Wrap Children” setting on the flex container.
  2. To have a specific number of items on each row of flex container, all you need to do is specify %-based Width on each flex child. So if you want to have 3 items per row, set their width to 33.33% (100% ÷ 3 = 33.33%).

To learn more, check out the description of the Fluid Grid example on Webflow Flexbox website. You can also watch our tutorial video on it.


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.