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

Question

如何在多行flexbox布局中指定换行符？有没有办法在多行flexbox中进行换行？例如，在此CodePen中的每个第3项之后中断。.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>喜欢.item:nth-child(3n){   /* line-break: after; */    }

Answer 1

截至2017年10月，既display:contents没有page-break-after得到广泛的支持，更好的说是关于支持这个但不支持其他玩家的Firefox，我提出了以下“hack”我认为比硬更好在每个第3个元素之后的中断编码，因为这将使页面移动友好变得非常困难。

正如所说它是一个黑客，缺点是你需要添加相当多的额外元素，但它可以做到这一点，即使在过时的IE11上也能跨浏览器工作。

“hack”是简单地在每个div之后添加一个额外的元素，设置为display:none然后使用css nth-child来决定实际上哪一个应该被强制显示为这样的线制动：

.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}.item:nth-child(3n-1) {
  background: silver;}.breaker {display:none;}.breaker:nth-child(3n) {
  display:block;
  width:100%;
  height:0;
 }

<div class="container">
  <div class="item">1</div><p class=breaker></p>
  <div class="item">2</div><p class=breaker></p>
  <div class="item">3</div><p class=breaker></p>
  <div class="item">4</div><p class=breaker></p>
  <div class="item">5</div><p class=breaker></p>
  <div class="item">6</div><p class=breaker></p>
  <div class="item">7</div><p class=breaker></p>
  <div class="item">8</div><p class=breaker></p>
  <div class="item">9</div><p class=breaker></p>
  <div class="item">10</div><p class=breaker></p></div>

Answer 2

从我的角度来看，使用<hr> 元素作为 flex项之间的换行符更具语义性。

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...</div>

CSS正在关注

.container {
  display: flex;
  flex-flow: wrap;}.container hr {
  width: 100%;}

在Chrome 66，Firefox 60和Safari 11中测试过。