如何在flexbox中的行之间均匀分布元素？

Question

如果我有以下内容:

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

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

Answer 1

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

该语句隐含的是每个 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在这里解释的那样，这只能通过更改结构或使用巧妙的方法插入不可见的实际或伪元素来强制换行来完成。

例如：

#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