如何轻松控制 Flexbox 项目之间的间距？

管理 Flexbox 项目间距

问题：

在 Flexbox 布局中，如何调整物品之间的距离，无需采用复杂的方法

**答案：

CSS Gap 属性：

对于高级浏览器，gap 属性可用于建立垂直和垂直方向的间距水平排列在弹性盒、网格和多列中

#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;
}

示例：

下面的代码片段演示了如何使用gap属性来创建flexbox之间的间距项目：

<div>

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

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

以上是如何轻松控制 Flexbox 项目之间的间距？的详细内容。更多信息请关注PHP中文网其他相关文章！