小编典典

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

html

有没有办法在多行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; */    
}

阅读 889

收藏
2020-05-10

共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- beforebreak-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上使用。

2020-05-10