html - 如何在 flexbox 中跨行均匀分布元素？

Question

如果我有类似下面的内容:

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

假设flex-direction: row还有那三个<div></div>元素适合一行，浏览器是否可以在两行中每行显示 2，而不是在一行显示 3，然后在下一行显示 1？

Answer 1

Assuming flex-direction: row and that three <div></div> elements fit on one line, is it possible for the browser to display 2 on each line, for two lines, instead of displaying 3 on one line, and then 1 on the next?

该声明中隐含的是每个 div 等于或小于完整行宽度的 1/3。

因此通常你的结果会是......

#flex {
  display: flex;
  flex-wrap: wrap;
  background: orange;
}
#flex div {
  border: 1px solid white;
  height: 100px;
  width: 33%;
  background: rebeccapurple;
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

但是，根据请求，您似乎希望在第二个元素之后换行。

如@Oriol 所述here这只能通过改变结构或使用巧妙的方法插入不可见的实际或伪元素来强制换行来完成。

例如:

#flex {
  display: flex;
  flex-wrap: wrap;
  background: orange;
  justify-content: space-around;
}
#flex div {
  border: 1px solid white;
  height: 100px;
  width: 33%;
  background: rebeccapurple;
}
#flex::before {
  content: "";
  width: 100%;
  order: 1;
}
div:nth-child(n + 3) {
  order: 2;
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </div