如何创建变量列并填充它们？答案

【问题标题】：How to create variable columns and fill them up?如何创建变量列并填充它们？
【发布时间】：2023-03-06 21:18:01
【问题描述】：

我有一个项目列表，我想列在彼此相邻的列中。我不知道会有多少物品，所以我不能有一个固定的高度。我希望他们像这样尽可能地填充空间：

#parent {
  background-color: firebrick;
  max-height: 200px; /* <-- eliminate */
  display: flex;
  flex-flow: column wrap;
}

.child {
  background-color: #fff;
  height: 30px;
  width: 100px;
  margin: 10px;
  padding: 3px;
}

<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

所以我基本上想要上面的内容，但在#parent 上没有max-height，但是当我删除它时，它们只会在一个宽列中。

【问题讨论】：

define 我希望他们尽可能地填满空间 .. 对我来说你所拥有的不是 good 但这个很好： jsfiddle.net/fk0hc5wy
@TemaniAfif 嘿！我添加了一个固定宽度，所以我想象的基本“算法”将是：尽可能多地彼此相邻，并且您拥有列数。然后尽可能从左到右填充这些列。但我也对其他想法持开放态度。

标签： css css-multicolumn-layout

【解决方案1】：

columns 可以这样做：

#parent {
  background-color: firebrick;
  column-width:120px; /* set the width of columns and the number will be automatic */
  column-gap: 20px; /* to replace margin between element */
  padding:0 10px;
}

.child {
  background-color: #fff;
  height: 30px;
  display:inline-block; /* use inline-block because block element are buggy */
  width:100%; /* make them full width so they behave like block */
  margin:10px 0; /* keep only top and bottom margin */
  padding: 3px;
  box-sizing:border-box;
}

<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

【讨论】：

有没有办法通过 CSS 选择底部的孩子（最后“行”）？他们在我的情况下有填充，但我希望底部没有额外的填充