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?
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.
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%).