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

Question

有没有办法在多行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>

喜欢

.item:nth-child(3n){
  /* line-break: after; */    
}

Answer 1

最简单，最可靠的解决方案是在适当的位置插入弹性项目。如果它们足够宽（width: 100%），则会强制换行。

.container {

  background: tomato;

  display: flex;

  flex-flow: row wrap;

  align-content: space-between;

  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(4n - 1) {

  background: silver;

}

.line-break {

  width: 100%;

}


<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="line-break"></div>

  <div class="item">4</div>

  <div class="item">5</div>

  <div class="item">6</div>

  <div class="line-break"></div>

  <div class="item">7</div>

  <div class="item">8</div>

  <div class="item">9</div>

  <div class="line-break"></div>

  <div class="item">10</div>

</div>

但这是丑陋的，不是语义上的。相反，我们可以在flex容器内生成伪元素，然后使用order它们将它们移到正确的位置。

.container {

  background: tomato;

  display: flex;

  flex-flow: row wrap;

  align-content: space-between;

  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) {

  background: silver;

}

.container::before, .container::after {

  content: '';

  width: 100%;

  order: 1;

}

.item:nth-child(n + 4) {

  order: 1;

}

.item:nth-child(n + 7) {

  order: 2;

}


<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>

但是有一个局限性：flex容器只能有::before和::after伪元素。这意味着您只能强制2个换行符。

为了解决这个问题，您可以在flex项目内部而不是在flex容器中生成伪元素。这样，您将不会被限制为2。但是那些伪元素不会是flex项目，因此它们将无法强制换行。

但幸运的是，引入了CSS Display L3display: contents（当前仅受Firefox 37支持）：

元素本身不会生成任何框，但是其子元素和伪元素仍会正常生成框。出于框生成和布局的目的，必须将元素视为在文档树中已被其子元素和伪元素替换。

因此，您可以将其应用于display: contentsflex容器的子容器，并将每个容器的内容包装在其他包装器中。然后，弹性项目将是那些额外的包装和子项的伪元素。

.container {

  background: tomato;

  display: flex;

  flex-flow: row wrap;

  align-content: space-between;

  justify-content: space-between;

}

.item {

  display: contents;

}

.item > div {

  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) > div {

  background: silver;

}

.item:nth-child(3n)::after {

  content: '';

  width: 100%;

}


<div class="container">

  <div class="item"><div>1</div></div>

  <div class="item"><div>2</div></div>

  <div class="item"><div>3</div></div>

  <div class="item"><div>4</div></div>

  <div class="item"><div>5</div></div>

  <div class="item"><div>6</div></div>

  <div class="item"><div>7</div></div>

  <div class="item"><div>8</div></div>

  <div class="item"><div>9</div></div>

  <div class="item"><div>10</div></div>

</div>

另外，根据碎片的Flex布局和CSS碎片，Flexbox，就允许通过使用强制休息break- before，break-after或它们的CSS 2.1别名：

.item:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New syntax */
}



.container {

  background: tomato;

  display: flex;

  flex-flow: row wrap;

  align-content: space-between;

  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) {

  page-break-after: always;

  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>

尚不广泛支持flexbox中的强制换行符，但可在Firefox上使用。