移除多行弹性项目之间的空间（间隙）

Posted 2023-03-05

【中文标题】移除多行弹性项目之间的空间（间隙）

【英文标题】：Remove space (gaps) between multiple lines of flex items when they wrap

【发布时间】：2017-04-14 21:48:54

【问题描述】：

我正在尝试在具有设定高度的容器中将多个项目放在一起。如果没有剩余空间，项目将彼此相邻。

这就是想法：

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

【参考方案1】：

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

这意味着多行弹性项目将沿横轴均匀分布。

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

---

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

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

来自规范：

8.3. Cross-axis Alignment: the align-items and align-self properties

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

8.4. Packing Flex Lines: the align-content property

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

align-content 属性有六个值：

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

这是stretch的定义：

stretch

线条伸展以占据剩余空间。如果剩余可用空间为负，则此值与flex-start 相同。否则，空闲空间将在所有行之间平均分配，从而增加它们的交叉大小。

换句话说，交叉轴上的align-content: stretch 与主轴上的flex: 1 相似。

【讨论】：

感谢您的解释 :) 完全忘记了 align-content 属性