Flexbox item wrap to a new line [duplicate] - html

Question

This question already has answers here:
How to specify line breaks in a multi-line flexbox layout?
(9 answers)
Closed 5 years ago.
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 transfer .new-string to a new line, along with the elements that follow it?

Answer 1

If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this 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 preserve your markup style, you'll have to insert this line-break blocks via 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

This seems to be possible to do with Grid-layout.
First to position items inline you can use
grid-template-columns: repeat(auto-fill, 50px);
so that each item takes 50px and it will position items in one line until no more items can fit in one line. And then you can use grid-column-start: 1; on specific item so that it goes to 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 3

As an alternative you could simply do this
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%;
}
The 100% width flex item will give you the line break.
Easiest way to get a new line in the flex grid, sure you need an extra div but I don't find it that bad of a way to do it

Answer 4

All flex items are set by default to order: 0. This means they will be laid out in the order they appear in the source code.
If you give the last item order: 1, this forces it to be last when additional items are added.
The ::before and ::after pseudo elements on a flex container create new flex items.
So if we add one pseudo element with a large enough width, it will force your last item (set by order) to the next row.
.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>