除去空間柔性物品的多條線時，他們包裹

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

柔性容器的初始設定是align-content: stretch。

這意味着，柔性物品的多個線將被沿着橫軸線均勻地分佈。

要覆蓋此行爲，適用align-content: flex-start到容器中。

---

當在單行柔性容器（即，flex-wrap: nowrap），屬性，以使用於沿着橫軸分配空間正在努力是align-items和align-self。

當您在多彎曲線集裝箱正在努力（即flex-wrap: wrap）–喜歡在問題–用於分發彎曲線（行/列）財產沿橫軸是align-content。

從規格：

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items設置所有的柔性容器的項目的默認對齊方式，包括匿名彎曲的物品。 align-self允許爲各個彈性項目覆蓋此默認對齊方式。

8.4. Packing Flex Lines: the align-content property

的align-content財產對齊 柔性容器內的柔性容器的線路時存在交叉軸額外的空間，類似 如何justify-content對齊的主軸線內的各個項目。 請注意，此屬性對單行flex容器沒有影響。

的align-content屬性有六個值：

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

這裏的定義stretch：

stretch

線條舒展佔用的剩餘空間。如果剩餘空閒空間爲負數，則該值與flex-start相同。否則，自由空間會在所有行之間平均分配，從而增加它們的交叉大小。

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