css - 为可变数量的元素定义列，全部在一行中，等距

Question

我很难描述我在寻找什么(在 Google 上搜索)

我有动态 Logo 内容，可以是 3 个 Logo ，也可以是 7 个。我的模板需要容纳所有这些，它们都需要以等间距显示在一行中。..

例如，如果我事先知道我有 3 件商品，我的代码就是这样

grid-template-columns: 1fr 1fr 1fr; 

如果我提前知道我有 7 件元素，我的代码将是这样的

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 

我不知道我曾经拥有多少元素。那么如何编码以适应动态数量的列呢？

Answer 1

此配置适用于您所需要做的所有事情的 Flexbox

.wrapper {
  display:flex
}
.wrapper img {
  flex:1;
}

使用 CSS 网格你必须做的

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
}

你考虑一个列流，你定义列的宽度等于 1fr

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  grid-gap:5px;
  margin:10px;
}

.wrapper span {
  height:50px;
  background:red;
}

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>