如何在 Chrome 中使用 `display: flex` 获得`column-gap` 的效果？答案

【问题标题】：How can I get `column-gap`'s effect with `display: flex` in Chrome?如何在 Chrome 中使用 `display: flex` 获得`column-gap` 的效果？
【发布时间】：2021-05-06 22:13:48
【问题描述】：

根据this0，Chrome 不支持column-gap 和display: flex。

不幸的是，我也必须支持 Chrome。

在不与 Firefox 混淆的情况下，在 Chrome 中获得空白的最干净的方法是什么（正确理解 column-gap 和 display: flex）？

.flex-container {
  display: flex;
  colum-gap: 10px;
  justify-content: space-between;
}

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

以上在 Firefox 中显示良好，.flex-item 元素之间有 10 像素的间距。 Chrome 没有这样的差距，因为它不能在display: flex 上做column-gap。

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
添加了一些代码来说明。
那么您将不得不改用margin....但这并不准确。
我对@987654333@ 的问题是它会将它添加到每个元素中，因此当它不应该有一个边距时（第一个或最后一个，取决于你是使用margin-left 或margin-right)

标签： css flexbox

【解决方案1】：

这样的？

.flex-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}
.flex-item {
  flex-basis: 33%;
  height: 30px;
  margin-left: 10px;
  background-color: #cccccc;
  }
.flex-item:first-child{
  margin-left: 0
}

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

【讨论】：

【解决方案2】：

*{
margin:0;
padding:0;
}
:root{
--gutter-size:.3em;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}
.flex > * {
    margin: var(--gutter-size);
}

<div class="flex">
  <h1>lorem</h1>
  <p>ipsume</p>
  <div>Dolor</div>
</div>

【讨论】：