Flexbox项目换行到新行 [英] Flexbox item wrap to a new line
本文介绍了Flexbox项目换行到新行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有一个flexbox网格。
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>
如何将.new-string及其后面的元素转移到新行?
How to transfer .new-string to a new line, along with the elements that follow it?
推荐答案
如果您查看这个好答案,您会注意到唯一的跨浏览器方式(不带2换行限制)正在插入 100%
宽度的空白块(换行符)。因此,对于类似的标记,它看起来像是
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>
如果要保留标记样式,则必须通过JavaScript插入以下换行符
块:
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>
这篇关于Flexbox项目换行到新行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文