在多行 flex 項目換行時移除它們之間的空間（間隙）

Question

我試圖在一個具有設定高度的容器中放置一些相互下方的物品。 如果沒有剩余空間，項目將彼此相鄰。

這是想法：

我正在嘗試使用 flexbox 來實現這一點，一個具有設置高度的容器，方向設置為column並且flex-wrap是wrap ：

問題是列之間有很大的間隙。

我嘗試將justify-content和align-items為flex-start ，但這可能是默認值。

有沒有辦法解決這個問題？

這是代碼：

 * { box-sizing: border-box; } body { font-family: sans-serif; } .container { display: flex; flex-wrap: wrap; height: 300px; flex-direction: column; background-color: #ccc; } .items { width: 100px; height: 100px; margin: 10px; background-color: tomato; color: white; font-size: 60px; font-weight: bold; text-align: center; padding: 15px; }

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

代碼筆

Answer 1

flex 容器的初始設置是align-content: stretch 。

這意味着多行 flex 項目將沿交叉軸均勻分布。

要覆蓋此行為，請將align-content: flex-start應用於容器。

---

當您在單行 flex 容器（即flex-wrap: nowrap ）中工作時，用於沿交叉軸分配空間的屬性是align-items和align-self 。

當您在多行 flex 容器（即flex-wrap: wrap ）中工作時——就像在問題中一樣——用於沿交叉軸分布彈性線（行/列）的屬性是align-content 。

從規范：

8.3. 跨軸對齊： align-items和align-self屬性

align-items設置所有彈性容器align-items的默認對齊方式，包括匿名彈性項目。 align-self允許為單個 flex 項目覆蓋此默認對齊方式。

8.4. 包裝 Flex Lines： align-content屬性

當橫軸上有額外空間時， align-content屬性會在 flex 容器內對齊 flex 容器的行，類似於justify-content在主軸內對齊單個項目的方式。 請注意，此屬性對單行 flex 容器沒有影響。

align-content屬性有六個值：

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

這是stretch的定義：

stretch

線條伸展以占據剩余空間。 如果剩余可用空間為負，則該值與flex-start相同。 否則，自由空間會在所有行之間平均分配，從而增加它們的交叉大小。

換句話說，橫軸上的align-content: stretch類似於主軸上的flex: 1 。