参见英文答案 >
Line break in multi-line flexbox7个
有一个flexBox网格.
有一个flexBox网格.
.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与其后的元素一起转移到新行？
解决方法
如果你看
this great answer,你会注意到唯一的跨浏览器方式(没有2个换行符限制)是插入100％-width空块(“换行符”).所以对于类似的标记,这看起来像
.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插入此换行符块：
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>
