Html Flexbox 项目换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45086899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox item wrap to a new line
提问by Yuri
There is a flexbox grid.
有一个 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>How to transfer .new-string to a new line, along with the elements that follow it?
如何将 .new-string 连同其后的元素一起转移到新行？
回答by Vadim Ovchinnikov
If you look at this great answeryou'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
如果您查看这个很棒的答案，您会注意到唯一的跨浏览器方式（没有 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>If you want to preserve your markup style, you'll have to insert this line-breakblocks via JavaScript:
如果要保留标记样式，则必须line-break通过 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>回答by Nenad Vracar
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.
这样每个项目都需要 50px，它会将项目放在一行中，直到没有更多项目可以放在一行中。然后您可以grid-column-start: 1;在特定项目上使用，以便它转到新行。
* {
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>回答by Huangism
As an alternative you could simply do this
作为替代方案，您可以简单地执行此操作
HTML
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
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
100% 宽度的 flex 项目会给你换行。在 flex 网格中获得新行的最简单方法，当然你需要一个额外的 div，但我认为这样做的方法并不糟糕
回答by Michael Benjamin
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.
默认情况下，所有 flex 项都设置为order: 0. 这意味着它们将按照它们在源代码中出现的顺序排列。
If you give the last item order: 1, this forces it to be last when additional items are added.
如果您提供 last item order: 1，这会在添加其他项目时强制将其放在最后。
The ::beforeand ::afterpseudo elements on a flex container create new flex items.
flex 容器上的::before和::after伪元素创建新的 flex 项。
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.
因此，如果我们添加一个足够大的伪元素，它将强制您的最后一项（由 设置order）到下一行。
.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>