Is there anything similar to
to break the flow on a flexbox?

Question

I know I can define how a flexbox behaves using flex-wrap and defining width to my child objects using flex-grow.

But what can I use to break the flow of one line at a specific point?

X X X X <br>
X X <br>
X X X X

I think this was answered relatively well here: http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox — socki03, Oct 13 '16 at 19:54
Thanks for the editing Hunter Turner n_n, On your comment, there will always be different ways to implement things. — Rafael, Oct 13 '16 at 20:04

score 1 · Answer 1 · answered Oct 13 '16 at 19:57

Here's one method:

Now you have a primary flex container that will create a new row whenever a flex item is added.

Each of these flex items is also a flex container with horizontally aligned flex items.

To emulate the illustration in the question...

X X X X <br>
X X <br>
X X X X

... the first flex item would contain four nested items, the second row would have two items and the third row would have four.

The break occurs anytime you add a flex item to the main container.

1 Answers1