Streaming live at 10am (PST)

Rows in Flexbox


#1

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?

Thanks,

Al


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


#2

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.


#3

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