有一种方法使换行在多行flexbox?
例如，在这个CodePen的每个第三个项目之后中断。
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background: gold;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n) {
background: silver;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
Like
.item:nth-child(3n){
/* line-break: after; */
}
你想要语义换行?
然后考虑使用<br>。W3Schools可能会建议你BR只是用来写诗的(我的很快就会出现)，但你可以改变它的风格，让它表现为一个100%宽度的块元素，将你的内容推到下一行。如果'br'建议一个断点，那么对我来说，它似乎比使用hr或100% div更合适，使html更具可读性。
在需要换行符的地方插入<br>，并像这样设置样式。
// Use `>` to avoid styling `<br>` inside your boxes
.container > br
{
width: 100%;
content: '';
}
你可以在媒体查询中禁用<br>，方法是适当地设置display:为block或none(我已经包含了一个这样的例子，但是省略了注释)。
如果需要，也可以使用order:来设置顺序。
你可以放很多你想要的，用不同的类或名字:-)
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.container > br
{
width: 100%;
content: '';
}
// .linebreak1
// {
// display: none;
// }
// @media (min-width: 768px)
// {
// .linebreak1
// {
// display: block;
// }
// }
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<br class="linebreak1"/>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
没有必要把自己局限于W3Schools所说的:
另一个不需要添加任何额外标记的解决方案是添加一些动态边距来分隔元素。
在本例中，这可以通过calc()的帮助来完成，只需在3n+2元素(2,5,8)上添加左边距和右边距。
.item:nth-child(3n+2) {
background: silver;
margin: 10px calc(50% - 175px);
}
片段的例子
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background: gold;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n+2) {
background: silver;
margin: 10px calc(50% - 175px);
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
