flexbox项之间的间距 [英] Spacing between flexbox items

问题描述

这就是我想要的：

我所拥有的最接近的在flexbox上应用边距项，然后从第一个&

The closest I've got. Applying margin on flexbox items, then removing half of it from the first & last children.

问题是：first-child 并不总是视觉上第一个，因为我可能会改变布局顺序（示例）。

The problem is that :first-child is not always the first visually, because I may alter the layout order (example).

有没有办法

推荐答案

CSS规范最近是已更新以应用 gap 属性除了CSS网格元素之外，还可以添加到flexbox元素。 在撰写本文时，Firefox和Chrome支持此功能。用于将其添加到webkit / Safari的错误跟踪器页面位于此处。使用 gap 属性，只需 gap：10px （或任意大小），您便可以得到想要的东西，而无需需要处理保证金，：第一个孩子，：最后一个孩子，等等。

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported by Firefox and Chrome at time of writing. The bug tracker page for adding it to webkit/Safari is here. With the gap property, you can get what you want with just gap: 10px (or whatever size you want) without needing to deal with margins, :first-child, :last-child, etc.

这篇关于flexbox项之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！