如何在 flex 布局中换行？

Question

我有第一、第二、第三项，然后我希望第四项无论空间有多宽都能移到下一行。

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}

<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>

- kptlronyttcna

---

我会在这种情况下使用网格而不是弹性布局。 - Paul Totzke

Answer 1

您可以在正确的位置插入一个宽伪元素：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container::after {
  content: '';
  width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
  order: 1;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

- Oriol

---

谢谢，它几乎可以工作了。唯一的问题是，如果有第五个元素，第四个元素会移到下一行，但第五个元素仍然留在第一行。 - kptlronyttcna

请使用 :nth-child(n + 4) 替代 :last-child。@kptlronyttcna - Oriol

通过使用伪元素，你只能在两个不同的位置（::before和::after）插入内容，因此最多只能有两个强制换行。但是，你可以编辑HTML布局，在正确的位置添加宽度虚拟元素，可以添加任意数量。 - Oriol

Answer 2

我已经解决了这个问题，方法如下：

.flex-container{
    display:flex;
    flex-direction:column;
    /* how you want your lines */
    text-align:center;
}

<div class="flex-container">
    <p>Line1</p>
    <p>Line2</p>
</div>

- sunil Prajapat