删除多行弹性项目之间的空间（空白）时，它们包装

我正在尝试在一个设定高度的容器中放置一些物品。 如果没有剩余的空间，物品将会彼此相邻。

这是这个想法：

我正在尝试使用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> 

codepen

Answer 1

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

这意味着多条弹性物品将沿横轴均匀分布。

要覆盖此行为，请将align-content: flex-start应用于容器。

---

当您在单线柔性容器 （即flex-wrap: nowrap ）中工作时，用于沿着交叉轴分布空间的属性是align-items和align-self 。

当您在多行柔性容器 （即flex-wrap: wrap ）中工作时（如问题中所述），用于沿横轴分布柔性线（行/列）的属性为align-content 。

从规格：

8.3。 交叉轴alignment： align-items和align-self属性

align-items为所有flex容器的项目（包括匿名flex项目）设置默认alignment方式。 align-self允许为各个弹性项目覆盖此默认alignment方式。

8.4。 打包Flex线： align-content属性

align-content属性在横轴上有额外的空间时，在flex容器中alignmentflex容器的行，类似于justify-content在主轴内alignment单个项目的方式。 请注意，此属性对单行flex容器没有影响。

align-content属性有六个值：

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

这是stretch的定义：

stretch

线伸展占据剩余的空间。 如果剩余空闲空间是负数，则该值与flex-start相同。 否则，自由空间会在所有行之间平均分配，从而增加它们的交叉大小。

换句话说，横轴上的align-content: stretch类似于主轴上的flex: 1 。