包裹

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>

codepen

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设置所有Flex容器项的默认对齐方式，包括匿名弹性项。 align-self允许为各个弹性项重写此默认对齐方式。

     

8.4. Packing Flex Lines: the align-content property

     

align-content属性对齐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。