为什么当我增加容器的宽度时，我的列间隙会变小？

Question

我很难理解多列布局中列间隙背后的逻辑。我在 this Fiddle 中有以下 HTML/CSS：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

.flex-container {
  height: 500px;
  width: 300px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

您会注意到，如果将容器的 width 从 300 像素更改为 400 像素，列之间的间距实际上会缩小。

为什么要这样做？是否可以左对齐列以便它们不会四处移动？ Fixed gap between CSS columns 可能表明这是不可能的。

Answer 1

如果您没有指定列数（列的第二个参数），那么系统将计算出可能的列数（即它采用自动作为列数参数）。

您指定的“理想”列宽为 120 像素，而实际项目的宽度小于该值。因此系统认为您可以将3列放入宽度为400px的容器中，并相应地布置前两列。

这是来自https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

的一些信息 <块引用>

column-width CSS 属性设置理想的列宽 多列布局。容器将有尽可能多的列 适合没有任何宽度小于列宽的 价值。如果容器的宽度比指定的窄 值，单列的宽度将小于声明的 列宽。

如果你想确保只有两列，那么给第二个参数：

columns: 120px 2;

.flex-container {
  height: 500px;
  width: 400px;
  border: 1px solid blue;
  columns: 120px 2;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

Answer 2

列布局有点棘手。如果您阅读与 column-width 相关的规范，您会发现：

<块引用>

描述了最佳列宽。实际列宽可能更宽（以填充可用空间），或更窄（仅当可用空间小于指定的列宽时）。 ^ref

从元素中移除宽度并调整容器大小以注意这一点：

.flex-container {
  width: 400px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
  overflow:hidden;
  resize:horizontal;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

您会注意到间隙确实是固定的，但列的宽度在变化。

您可以在此处找到有关该算法的更多详细信息：https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

一个解决方案是考虑使用具有固定列宽的 CSS 网格。诀窍是定义网格列的宽度等于列的间隙 + 宽度，然后让容器填充所有列（其宽度将是 间隙 + 列宽度的乘数 )

调整屏幕大小以查看结果：

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
  overflow: hidden;
  resize: horizontal;
  border: 1px solid blue;

}

.flex-container {
  grid-column:1/-1;
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
  </div>
</div>