CSS3项目之间的Flexbox间距

ikfrs5lh 于 12个月前发布在 CSS3

关注(0)|答案(3)|浏览(149)

作为Flexbox的新手（尽管在CSS方面很有经验），在我看来，我读过的大多数教程都很方便地“掩盖”了一件事，那就是Flex项之间的间距。
例如，引用最多的教程之一是this one at CSS Tricks。
这是非常好的，一直是有帮助的，像这样的图表已经把我赶走：

请注意Flex项之间的空格。虽然没有在任何地方提到，也没有在示例代码中，但似乎获得空格的唯一方法是使用css边距。
是的，还是我遗漏了什么重要的东西？
因为我需要创建的是这个，很像上面的“中心”演示：

然而，当我自己尝试时，我当然得到了这个：

如果我使用空格，我得到这个。很大的空间。

因此，似乎我需要添加margin-right到前2个框中，以获得3个居中的框，它们之间有一个小间隙。
这是否只是Flexbox的一个糟糕用例？因为我认为用Flexbox创建我的3个盒子比使用简单的边距和居中没有什么优势。
我错过了什么明显的东西吗？

css

来源：https://stackoverflow.com/questions/30814878/css3-flexbox-spacing-between-items

3条答案

按热度按时间

7gyucuyw1#

不-你什么都没错过。Flexbox非常适合于对元素进行排序，并定义这些元素沿着主轴或横轴的总体对齐方式，但它并不直接涉及单个项目的间距。如果你看一下Flexbox文章中使用的Codepen，你会注意到他们用途：

margin-top: 10px

以定义元素间距。希望这有帮助！

赞(0）回复(0）举报 12个月前

kgqe7b3p2#

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

赞(0）回复(0）举报 12个月前

zz2j4svz3#

CSS规范最近已经更新，除了CSS网格元素外，还将gap属性应用于flexbox元素。所有主要浏览器的最新版本都支持此功能。使用gap属性，您可以使用类似column-gap: 10px的东西（或任何您想要的大小）获得您想要的内容。

赞(0）回复(0）举报 12个月前

我来回答

CSS3项目之间的Flexbox间距

3条答案

相关问题

热门标签

最新问答