2024年1月7日发(作者：)

flex 子元素间距

在 flex 布局中，可以通过设置 `justify-content` 和 `align-items` 属性来控制子元素的间距。以下是一些常见的方式：

1. 设置 `justify-content` 为 `space-between` 或 `space-around`，可以在子元素之间创建等间距的间距。例如：

css

.container {

display: flex;

justify-content: space-between; /* 在子元素之间创建等间距的间距 */

}

2. 使用 `margin` 属性来调整相邻子元素之间的间距。例如：

css

.container > * + * {

margin-left: 10px; /* 将子元素之间的左间距设置为 10px */

}

3. 将 `flex-basis` 设为固定值或百分比，来给子元素定义一个初始尺寸，从而控制它们之间的间距。例如：

css

.container > * {

flex-basis: 20%; /* 将子元素的初始尺寸设为 20% */

}

需要注意的是，以上方法都只是控制子元素之间的间距，并不影响子元素本身的尺寸。如果想要调整子元素的尺寸，可以使用 `flex-grow`、`flex-shrink` 和

`flex-basis` 这三个属性结合使用。