除去空间柔性物品的多条线时，他们包裹

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。