使用 CSS 弹性盒子布局，您可以轻松地控制元素的间距距离。通过 display: flex; 属性将父元素设置为弹性容器，并使用 flex-direction 属性来定义主轴方向（水平或垂直）。然后，您可以使用 justify-content 和 align-items 属性来对其子元素进行水平和垂直居中，并使用 gap 属性来设置元素之间的距离。
举例来说，如果您想创建一个具有 3 个子元素的水平导航菜单，并将元素之间的距离设置为 20 像素，请按照以下步骤操作：
HTML 代码：
<nav>
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</nav>CSS 代码：
nav {
display: flex; /* 将父元素设置为弹性容器 */
justify-content: space-between; /* 指定子元素在主轴上的对齐方式 */
align-items: center; /* 指定子元素在交叉轴上的对齐方式 */
gap: 20px; /* 设置元素之间的距离 */
}
nav a {
padding: 10px; /* 为菜单项添加内边距 */
}在这里，我们使用 justify-content: space-between; 将菜单项分别对齐到弹性容器的两端，并使用 align-items: center; 将它们在垂直方向上居中。通过设置 gap: 20px;，我们将菜单项之间的距离设置为 20 像素。
值得注意的是，gap 属性仅适用于 Flexbox 和 Grid 布局模型，如果您需要支持旧版本的浏览器，可以考虑使用 margin 或 padding 的方式来控制元素间的距离距离。