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