如何使用 CSS 正确设置 Flexbox 项目的空间？

如何使用 CSS 调整 Flexbox 项目之间的距离

使用 margin: 0 5px 和 margin: 0 设置 Flexbox 项目之间的最小距离 - 5px 似乎是一个解决方法。然而，有专门为此目的设计的CSS属性：

CSS间隙属性：

在现代浏览器中，间隙属性可用于多列，flexbox，和网格布局。它设置行和列之间的间距：

#box {
  display: flex;
  gap: 10px;
}

CSS row-gap 属性：

对于 Flexbox 和网格布局，row-gap 定义之间的间距行：

#box {
   display: flex;
   row-gap: 10px;
}

CSS 列间隙属性：

在多列、Flexbox 和网格布局中，column-gap 指定列之间的空间：

#box {
  display: flex;
  column-gap: 10px;
}

示例：

为了说明用法，请考虑以下内容代码：

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

此代码创建一个包含四个灰色项目的 Flexbox，这些项目均匀间隔 10 像素的间隙。

以上是如何使用 CSS 正确设置 Flexbox 项目的空间？的详细内容。更多信息请关注PHP中文网其他相关文章！