如何在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 

Answer 2

您可以在父级中使用flex-wrap:wrap在子级中使用flex-basis:50%

 #flex { display: flex; flex-wrap: wrap; width: 500px /* choose your width here*/ } #flex div { flex: 0 50%; border: 1px solid red; height: 100px; box-sizing: border-box } 

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

Answer 3

插入中断的另一种方法，在元素上使用margin-right，在随后的元素上使用等效的margin-left。

将鼠标悬停在容器上以适应新的宽度。

 .container { width: 500px; height: 100px; border: solid 1px green; display: flex; flex-wrap: wrap; transition: width 3s; } .child { width: 150px; border: solid 1px red; } .child:nth-child(3) { margin-right: 150px; } .child:nth-child(4) { margin-left: -150px; } .container:hover { width: 700px; } 

 <div class="container"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div>