如何在多行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&nbsp;nth-child来决定实际上哪一个应该被强制显示为这样的线制动：.container&nbsp;{ &nbsp;&nbsp;background:&nbsp;tomato; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-flow:&nbsp;row&nbsp;wrap; &nbsp;&nbsp;justify-content:&nbsp;space-between;}.item&nbsp;{ &nbsp;&nbsp;width:&nbsp;100px; &nbsp;&nbsp;background:&nbsp;gold; &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black; &nbsp;&nbsp;font-size:&nbsp;30px; &nbsp;&nbsp;line-height:&nbsp;100px; &nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;margin:&nbsp;10px}.item:nth-child(3n-1)&nbsp;{ &nbsp;&nbsp;background:&nbsp;silver;}.breaker&nbsp;{display:none;}.breaker:nth-child(3n)&nbsp;{ &nbsp;&nbsp;display:block; &nbsp;&nbsp;width:100%; &nbsp;&nbsp;height:0; &nbsp;}<div&nbsp;class="container"> &nbsp;&nbsp;<div&nbsp;class="item">1</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">2</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">3</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">4</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">5</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">6</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">7</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">8</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">9</div><p&nbsp;class=breaker></p> &nbsp;&nbsp;<div&nbsp;class="item">10</div><p&nbsp;class=breaker></p></div>

Answer 2

从我的角度来看，使用<hr>&nbsp;元素作为&nbsp;flex项之间的换行符更具语义性。<div&nbsp;class="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<hr> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;...</div>CSS正在关注.container&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-flow:&nbsp;wrap;}.container&nbsp;hr&nbsp;{ &nbsp;&nbsp;width:&nbsp;100%;}在Chrome 66，Firefox 60和Safari 11中测试过。