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

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 从 300px 更改为 400px，列之间的间距实际上会缩小。

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

Answer 1

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

您已将 'ideal' 列宽指定为 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 a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column 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>

Answer 2

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

describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified 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>

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

Why does my column gap get smaller when I increase the width of my container?

html

css

flexbox

css-multicolumn-layout