當我增加容器的寬度時，為什么我的列間距變小了？

Question

我很難理解多列布局中列間隙背后的邏輯。 我在這個 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，列之間的間隙實際上會縮小。

為什么要這樣做？ 是否可以左對齊列以使它們不會移動？ CSS 列之間的固定間隙可能表明這是不可能的。

Answer 1

如果您沒有指定列數（列的第二個參數），那么系統將計算出可能的列數（即，它將 auto 作為列數參數）。

您已指定 120 像素的“理想”列寬，而實際項目的寬度小於該寬度。 因此，系統認為您可以將 3 列放入寬度為 400px 的容器中，並相應地布置前兩列。

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

column-width CSS 屬性設置多列布局中的理想列寬。 容器將包含盡可能多的列，而其中任何列的寬度都不會小於 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相關的規范，您可以找到：

描述了最佳列寬。 實際的列寬可能更寬（以填充可用空間），也可能更窄（僅當可用空間小於指定的列寬時）。 ^參考

從元素中刪除寬度並調整容器大小以注意這一點：

 .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>