Html 当它们换行时去除多行 flex 项目之间的空间（间隙）

Remove space (gaps) between multiple lines of flex items when they wrap

提问by j.grima

I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.

我试图在一个具有设定高度的容器中放置一些相互下方的物品。如果没有剩余空间，项目将彼此相邻。

This is the idea:

这是想法：

I am trying to achieve this using flexbox, a container with a set height, direction is set to columnand flex-wrapis wrap:

我试图做到这一点使用flexbox，这与一组高度的容器，方向设置为column和flex-wrap是wrap：

The issue is that there are wide gaps between the columns.

问题是列之间有很大的间隙。

I tried setting both justify-contentand align-itemsto flex-start, but that is probably the default value.

我尝试将justify-content和都设置align-items为flex-start，但这可能是默认值。

Is there any way to solve this?

有没有办法解决这个问题？

Here is the code:

这是代码：

* {
  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

代码笔

回答by Michael Benjamin

An initial setting of a flex container is align-content: stretch.

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

This means that multiple lines of flex items will be distributed evenly along the cross axis.

这意味着多行 flex 项目将沿交叉轴均匀分布。

To override this behavior, apply align-content: flex-startto the container.

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

---

---

When you're working in a single-line flex container(i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-itemsand align-self.

当您在单行 flex 容器（即flex-wrap: nowrap）中工作时，用于沿横轴分配空间的属性是align-items和align-self。

When you're working in a multi-line flex container(i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns)along the cross axis is align-content.

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

From the spec:

从规范：

8.3. Cross-axis Alignment: the align-itemsand align-selfproperties

align-itemssets the default alignment for all of the flex container's items, including anonymous flex items. align-selfallows this default alignment to be overridden for individual flex items.

8.4. Packing Flex Lines: the align-contentproperty

The align-contentproperty aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

8.3. 横轴对齐：align-items和align-self属性

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

8.4. 包装 Flex Lines：align-content属性

align-content当横轴中有额外空间时，该属性会在 flex 容器内对齐 flex 容器的线条，类似于如何justify-content在主轴内对齐单个项目。 请注意，此属性对单行 flex 容器没有影响。

The align-contentproperty takes six values:

该align-content属性有六个值：

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

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

Here's the definition for stretch:

这是 的定义stretch：

stretch

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

stretch

线条伸展以占据剩余空间。如果剩余可用空间为负，则该值等于flex-start。否则，自由空间会在所有行之间平均分配，从而增加它们的交叉大小。

In other words, align-content: stretchon the cross axis is similar to flex: 1on the main axis.

换句话说，align-content: stretch在交叉轴上类似于flex: 1在主轴上。