Flexbox wrap item

Question

There is a flexbox grid.

.flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } 

 <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item new-string"></div> </div> 

How to pass a new line to a new line along with the elements that follow it?

Answer 1

If you look at this excellent answer , you will notice that the only way to cross-browser (without a 2-line limit) is to insert 100% -width empty blocks ("line breaks"). Therefore, for a similar markup, it will look like

 .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .line-break { width: 100%; } 

 <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="line-break"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

If you want to keep your markup style, you have to insert these line-break blocks through JavaScript:

 var items = document.querySelectorAll(".flex > .item.new-string"); for (var i = 0; i < items.length; i++) { var lineBreak = document.createElement('div'); lineBreak.className = "line-break"; items[i].parentNode.insertBefore(lineBreak, items[i]); } 

 .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .line-break { width: 100%; } 

 <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item new-string"></div> <div class="item"></div> <div class="item new-string"></div> <div class="item new-string"></div> <div class="item"></div> <div class="item"></div> </div> 

Answer 2

Alternatively you can just do it

HTML

 <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item line-break"></div> <div class="item new-string"></div> </div> 

CSS

 .line-break { width: 100%; } 

A flex element of 100% width will give you a line break. The easiest way to get a new line in a flexible grid, of course, you need an extra div, but I don't think this is a bad way to do this.

Answer 3

This seems to be possible with a grid layout. First of all, to position your positions, you can use

 grid-template-columns: repeat(auto-fill, 50px); 

so that each element occupies 50 pixels, and it positions the elements in one line until there are no more elements in one line. And then you can use grid-column-start: 1; for a specific element so that it jumps to a new line.

 * { box-sizing: border-box; } .flex { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, 50px); border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .new-string { grid-column-start: 1; background: red; } 

 <div class="flex"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div></div> 

Answer 4

All flex items are set as order: 0 by default. This means that they will be laid out in the order in which they appear in the source code.

If you give the last element of order: 1 , this makes it be the last when additional elements are added.

The ::before and ::after elements of an alias in the flex container create new flexibility elements .

So, if we add one pseudo-element with a sufficiently large width, it will force your last element (given by order ) to the next line.

 .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } .new-string { order: 1; } .flex::after { content: ""; flex: 0 0 100%; height: 0; } 

 <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item new-string"></div> </div>