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

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;
}

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

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

Answer 1

如果您没有指定列数(列的第二个参数)，则系统将计算出可能的列数(即，它采用 auto 作为列数参数)。

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

以下是来自 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width 的一些信息

The column-width CSS property sets the ideal column width in amulti-column layout. The container will have as many columns as canfit without any of them having a width less than the column-widthvalue. If the width of the container is narrower than the specifiedvalue, the single column's width will be smaller than the declaredcolumn width.

如果您想确保只有两列，请提供第二个参数:

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>