对于 Flexbox 来说有些陌生(尽管在 CSS 方面经验丰富),在我看来,我读过的大多数教程都方便地“掩盖”的一件事是 Flex 项目之间的间距。
例如,被引用最多的教程之一是CSS Tricks 中的这个 https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
这非常好并且很有帮助,像这样的图表让我很困惑:
注意弹性项目之间的空格。尽管没有在任何地方提到,也没有在示例代码中提及,但似乎获得空格的唯一方法是使用 css 边距。
正确,还是我在这里遗漏了一些重要的东西?
Because what i need to create is this, a lot like the "center" demo above:
However, when I try it myself, I of course get this:
if I use space-around, I get this instead. Huge space.
因此,我似乎需要向前 2 个框添加 margin-right,以获得 3 个居中的框,它们之间有一个小间隙。
这对于 Flexbox 来说是一个糟糕的用例吗?因为我认为使用 Flexbox 创建 3 个盒子比使用简单的边距和居中几乎没有什么优势。
我在这里遗漏了一些明显的东西吗?
不 - 你没有错过任何东西。 Flexbox 非常适合对元素进行排序并定义这些元素沿主轴或交叉轴的总体对齐方式,但不能直接说明单个项目的间距。,你会注意到他们使用:
margin-top: 10px
定义元素间距。希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)