多行flexbox中的换行符

Question

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

例如,在此笔中的每个第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

最简单和最可靠的解决方案是在正确的位置插入柔性物品.如果它们足够宽(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 L3已经推出display: contents(目前仅支持Firefox 37):

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

因此,您可以应用于display: contentsFlex容器的子容器,并将每个容器的内容包装在另一个包装器中.然后,flex项将是那些额外的包装器和子元素的伪元素.

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

Answer 2

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

.container {
  display: flex;
  flex-flow: wrap;
}

.container hr {
  width: 100%;
}

CSS正在关注

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

在Chrome 66,Firefox 60和Safari 11中测试过.

Answer 3

@Oriol有一个很好的答案,遗憾的是截至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 4

您要语义换行吗？

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

<br>在需要换行的位置插入并按如下所示对其进行样式设置。

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

您可以通过设置为或适当地禁用<br>媒体查询，（我已经提供了一个示例，但已将其注释掉了）。display:blocknone

您也可以根据order:需要设置订单。

您可以根据需要放置任意数量的类或名称：-)

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

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

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

无需将自己局限于W3Schools所说的话：

Answer 5

我只是想把这个答案混合在一起，目的是提醒 \xe2\x80\x93 给定正确的条件 \xe2\x80\x93 你有时不需要过度思考手头的问题。你想要的可能可以用flex: wrap和来实现max-width，而不是:nth-child。

\n

\r\n

\r\n

ul {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  max-width: 420px;\n  list-style-type: none;\n  background-color: tomato;\n  margin: 0 auto;\n  padding: 0;\n}\n\nli {\n  display: inline-block;\n  background-color: #ccc;\n  border: 1px solid #333;\n  width: 23px;\n  height: 23px;\n  text-align: center;\n  font-size: 1rem;\n  line-height: 1.5;\n  margin: 0.2rem;\n  flex-shrink: 0;\n}

\r\n

<div class="root">\n  <ul>\n    <li>A</li>\n    <li>B</li>\n    <li>C</li>\n    <li>D</li>\n    <li>E</li>\n    <li>F</li>\n    <li>G</li>\n    <li>H</li>\n    <li>I</li>\n    <li>J</li>\n    <li>K</li>\n    <li>L</li>\n    <li>M</li>\n    <li>N</li>\n    <li>O</li>\n    <li>P</li>\n    <li>Q</li>\n    <li>R</li>\n    <li>S</li>\n    <li>T</li>\n    <li>U</li>\n    <li>V</li>\n    <li>W</li>\n    <li>X</li>\n    <li>Y</li>\n    <li>Z</li>\n  </ul>\n</div>

\r\n

\r\n

\r\n

\n

https://jsfiddle.net/age3qp4d/

\n

Answer 6

我认为传统方式灵活且易于理解:

标记

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

创建grid.css文件:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

我创建了一个例子(jsfiddle)

尝试在400px下调整窗口大小,它的响应速度!

Answer 7

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

在本例中，这可以在 的帮助下完成calc()，只需将margin-left和添加margin-right到 3n+2 元素 (2, 5, 8)

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

片段示例

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

.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+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}