带有固定元素的响应列答案

【问题标题】：Responsive columns with fixed with elements带有固定元素的响应列
【发布时间】：2021-09-05 16:42:00
【问题描述】：

我正在尝试使用 css 创建一组从三列优雅降级为一列的列。通常我会这样做，但要求是每列中的项目应保持固定大小，并且列之间应始终保持 16px 的间距。

这就是我要找的东西：

但是，当我向列添加宽度属性时，它们之间的间距会变得更大。我对如何在屏幕更改大小时保持列相同感到困惑。我知道不可避免地越小，我将不得不使用媒体查询更改列宽，以使它们变成两列，然后变成一列，所以这不是问题。

这是我在列上设置宽度时列间距发生的情况的图片：

哦，当然，这是代码和codepen link。我建议用 SO 编辑器全屏运行它，因为我没有做过任何响应式 css，列只是浓缩成一个大块，很难看到发生了什么。

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
  margin-right: 8px;
  margin-left: 8px;
}

.col {
  width: 33.33%;
}

<div class="row">
  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>
</div>

【问题讨论】：

您不需要 col 类中的 width 属性。让它们中的子元素确定（因为它们的大小必须固定）。将列与 justify-center 粘合在一起，并将 16px 的 column-gap 属性添加到 row 类。您也不需要 tile 类的边距。

标签： html css responsive-design

【解决方案1】：

我认为最终的样式应该是这样的：

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
}

我还在这里编辑了 codepen https://codepen.io/tobycodes/pen/xxrEgje。

诀窍是justify: center; 和gap: 16px;。您可以在此处阅读有关 gap 属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/gap。该属性是grid-gap 的简写，但非常适用于 flexbox。

【讨论】：

这很甜蜜。 gap 在大多数现代浏览器上都有支持，希望它有更多，但我认为这样就可以了！我会试一试，然后告诉你。
好的，所以这并不能真正解决问题。我需要以某种方式在某个断点处，一次将列减少到 2 个，然后最终当我们使用手机大小的设备时，将它们堆叠在一起。这就是为什么我最初尝试使用 .col 类来处理断点。
嗯，没关系。您可以重新引入 col 类并这样做。在我的 codepen 中（在答案中），我添加了一个 flex-wrap 属性，当屏幕大小不能再包含 3 列甚至 2 列时，它会自动将图块相互堆叠。答案实际上解决了您的“但要求是每列中的项目应保持固定大小，并且列之间应始终保持16px的间距” 。您可以在列或其子列上设置宽度，并且它必须是固定宽度，即没有百分比。在这种情况下，.tile 是孩子。
请看这个codepen codepen.io/tobycodes/pen/xxrEgje

【解决方案2】：

.tile {
  width: 300px;
}

从 tile 类中删除 width 到 tile 宽度等于父 div 宽度

【讨论】：