包裹时,删除多行柔性物品之间的空隙(间隙)

Question

我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.

这是个主意:

我试图使用flexbox实现这一点,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容器(即flex-wrap: nowrap)中工作时,用于沿横轴分配空间的属性为align-items和align-self.

当您在多线柔性容器(即flex-wrap: wrap)中工作时 - 就像在问题中一样 - 用于沿横轴分布柔性线(行/列)的属性是align-content.

从规格:

8.3.交叉轴对齐:align-items和align-self属性

align-items设置所有Flex容器项的默认对齐方式,包括匿名弹性项.align-self允许为各个弹性项重写此默认对齐方式.

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在主轴上.