Html 如何在多行flexbox布局中指定换行符？

有没有办法在多行flexbox中换行

例如，在中的每个第三项后打断

.container{
背景：番茄；
显示器：flex；
柔性流：行换行；
对齐内容：之间的空间；
证明内容：之间的空间；
}
.项目{
宽度：100px；
高度：100px；
背景：金；
边框：1px纯黑；
字体大小：30px；
线高：100px；
文本对齐：居中；
利润率：10px；
}
.项目：第n个子项（3n）{
背景：银；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

最简单、最可靠的解决方案是在正确的位置插入弹性元件。如果它们足够宽（

宽度：100%

），它们将强制换行

.container{
背景：番茄；
显示器：flex；
柔性流：行换行；
对齐内容：之间的空间；
证明内容：之间的空间；
}
.项目{
宽度：100px；
背景：金；
高度：100px；
边框：1px纯黑；
字体大小：30px；
线高：100px；
文本对齐：居中；
利润率：10px
}
.项目：第n个孩子（4n-1）{
背景：银；
}
.换行{
宽度：100%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

对于将来的问题，也可以使用

float

属性并在每3个元素中清除它

这是我举的一个例子

.grid{
显示：内联块；
}
.细胞{
显示：内联块；
位置：相对位置；
浮动：左；
利润率：8px；
宽度：48px；
高度：48px；
背景色：#bdbd；
字体系列：“Helvetica”，“Arial”，无衬线；
字体大小：14px；
字体大小：400；
线高：20px；
文本缩进：4px；
颜色：#fff；
}
.单元：第n个子单元（3n）+.单元{
明确：两者皆有；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

.container{
背景：番茄；
显示器：flex；
柔性流：行换行；
对齐内容：之间的空间；
证明内容：之间的空间；
}
.项目{
宽度：100px；
高度：100px；
背景：金；
边框：1px纯黑；
字体大小：30px；
线高：100px；
文本对齐：居中；
利润率：10px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

@Oriol有一个很好的答案，遗憾的是，截至2017年10月，

显示：内容

，以及

后的分页符都没有得到广泛支持，最好说是关于Firefox的，它支持这一点，但不支持其他玩家，我提出了以下“hack”在每第三个元素之后，我认为在硬编码中比硬编码要好，因为这会使页面移动变得非常困难。
如前所述，这是一种黑客攻击，缺点是你需要免费添加大量额外元素，但它做到了这一点，甚至在过时的IE11上也能跨浏览器工作

“hack”只是在每个div之后添加一个附加元素，该元素设置为
display:none
，然后使用css
nth child
来决定哪一个元素应该实际可见，强制执行如下线路制动：


.container{
背景：番茄；
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
}
.项目{
宽度：100px；
背景：金；
高度：100px；
边框：1px纯黑；
字体大小：30px；
线高：100px；
文本对齐：居中；
利润率：10px
}
.项目：第n个孩子（3n-1）{
背景：银；
}
.断路器{
显示：无；
}
.断路器：第n个子（3n）{
显示：块；
宽度：100%；
身高：0；
}

1.

2.

3.

4.

5.

6.

7.

8.

9

10

我认为传统的方法很灵活，也很容易理解：

标记

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

我创造了一个

尝试在400px以下调整窗口大小，它响应速度快
 从我的角度来看，在flex项目之间使用
更具语义


.container{
显示器：flex；
柔性流动：包裹；
}
.集装箱人力资源{
宽度：100%；
}

1.
2.

3.
2.
...
您想要语义换行符吗

然后考虑使用<代码> BR> < /代码>。W3Schools可能会建议您，
BR
仅用于写诗（我的即将推出），但您可以更改样式，使其表现为100%宽度的块元素，将内容推到下一行。如果“br”表示中断，那么对我来说，它似乎比使用
hr
或100%
div
更合适，并且使html更具可读性

在需要换行符的位置插入

，并按如下方式设置样式

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }


1.
2.

另一种不需要添加任何额外标记的可能解决方案是添加一些动态边距来分隔元素

在本例中，这可以借助于
calc（）
，只需将
marginleft
和
marginright
添加到3n+2元素（2,5,8）中

片段示例


.container{
背景：番茄；
显示器：flex；
柔性流：行换行；
对齐内容：之间的空间；
证明内容：之间的空间；
}
.项目{
宽度：100px；
高度：100px；
背景：金；
边框：1px纯黑；
字体大小：30px；
线高：100px；
文本对齐：居中；
利润率：10px；
}
.项目：第n个子项（3n+2）{
背景：银；
利润率：10px计算（50%-175px）；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
我在这里尝试了几个答案，但没有一个有效。具有讽刺意味的是，它所起的作用是人们可以尝试的

最简单的替代方案：

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}