Html 如何在同一行的项目上设置flexbox的间距？

我有这个代码，我想在同一行中的两个项目之间的间隙空间，但这是不工作的。我希望在A和B之间有12px的间隙。然而，我不想使用像边距/填充这样的旧技术

我正在跟随来自的教程

有人知道吗

---

谢谢

如果要为间距设置特定数量的像素，则需要在项目之间添加边距，因为当前不支持间距。例如：

<div class="container">
    <div class="first-item">
      AAA
    </div>
    <div>
      BBBBBBBBBBB
    </div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.first-item {
  margin-right: 12px;
}

<div class="container">
    <div class="first-item">
      AAA
    </div>
    <div>
      BBBBBBBBBBB
    </div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

AAA
bbbbbbbbbbbb
.集装箱{
显示器：flex；
弯曲方向：行；
}
.第一项{
右边距：12px；
}

但是，如果间隙的大小无关紧要，则可以使用flexbox对齐特性在行中均匀分布div。例如：

<div class="container">
    <div class="first-item">
      AAA
    </div>
    <div>
      BBBBBBBBBBB
    </div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.first-item {
  margin-right: 12px;
}

<div class="container">
    <div class="first-item">
      AAA
    </div>
    <div>
      BBBBBBBBBBB
    </div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

AAA
bbbbbbbbbbbb
.集装箱{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}

但是我不想使用像边距/填充这样的旧技术。-->你需要等到flexbox支持gap（你的代码实际上在最新版本的Chrome中工作），所以目前没有flex gap或类似的东西？它还没有得到很好的支持-将来所有的布局都会有gap：看起来你参考的文章给出了当前的解决方案，Cory Ryan的一篇。没有其他方法可以显式设置流体容器上项目之间的间隙宽度。如果在容器上设置宽度，则可以将项目之间的间距和宽度设置为等于设置宽度。