在多行 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 。