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

问题描述

我很难理解多列布局中列间隙背后的逻辑.我在

为什么要这样做?是否可以将列左对齐，以免它们四处移动?修正了CSS列之间的间距可能表明这是不可能的.

解决方案

列布局有些棘手.如果您阅读有关 column-width 的规范，则可以找到:

删除元素的宽度并调整容器大小以注意这一点:

  .flex-container {宽度:400像素；边框:1px纯蓝色；列:120px；内边距:10px;溢出:隐藏调整大小:水平；}.flex-item {背景:OliveDrab；内边距:5px；高度:100px；行高:100px;白颜色;文本对齐:居中；闯入:避免列；}  

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

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

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

---

一种解决方案是考虑使用具有固定列宽的CSS网格.诀窍是将网格列的宽度定义为等于gap + column的宽度，然后使容器填充所有列(其宽度将为 gap + columnwidth 的倍数))

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

  .container {显示:网格；grid-template-columns:repeat(auto-fit，140px);/* 120 + 20 */溢出:隐藏；调整大小:水平；边框:1px纯蓝色；}.flex-container {网格列:1/-1;列宽:120px；栏距:20px;内边距:10px;}.flex-item {背景:OliveDrab；内边距:5px；高度:100px；行高:100px;白颜色;文本对齐:居中；闯入:避免列；}  

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

I'm having a hard time understanding the logic behind the column gap in a multi-column layout. I have the following HTML/CSS in this Fiddle:

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

You will notice that if you change the width of the container from 300px to 400px, the gap between the columns actually shrinks.

Why is it doing this? Is it possible to left-align the columns so they don't move around? Fixed gap between CSS columns may suggest that's not possible.

解决方案

The column layout is a bit tricky. If you read the specification related to column-width you can find:

Remove the width from the elements and resize the container to notice this:

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

You will notice that the gap is indeed fixed but the width of columns is changing.

You can find more details around the algorithm here: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

A solution is to consider the use of CSS grid having fixed column width. The trick is to define the width of the grid column to be equal to the gap+width of column and you make you container fill all the columns (its width will be a multiplier of gap+width of column)

Resize the screen to see the result:

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

这篇关于当我增加容器的宽度时，为什么我的列间隙会变小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！