时间戳

首页 > 解决方案 > 当我增加容器的宽度时，为什么我的列间距变小了？

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

问题描述

我很难理解多列布局中列间隙背后的逻辑。我在这个 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 列之间的固定间隙可能表明这是不可能的。

标签： htmlcssflexboxcss-multicolumn-layout

解决方案

如果您没有指定列数（列的第二个参数），那么系统将计算出可能的列数（即它采用 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>

推荐阅读