Flex 布局中如何设置项目间距？gap 属性的兼容性如何？
gap 属性（推荐）
.container {
display: flex;
gap: 16px; /* 行和列间距都是 16px */
/* 或分别设置 */
row-gap: 16px;
column-gap: 24px;
}gap 是 row-gap 和 column-gap 的简写，Flex、Grid 都支持。
兼容性
- Chrome 84+、Firefox 63+、Safari 14.1+
- IE 完全不支持
- 现代项目可放心使用
替代方案（旧方案）
1. margin + 负 margin
.container {
display: flex;
margin: -8px; /* 抵消最外层多出来的 margin */
}
.item {
margin: 8px;
}2. margin + last-child / first-child
.item {
margin-right: 16px;
}
.item:last-child {
margin-right: 0;
}3. justify-content: space-between（固定数量）
/* 仅适用于固定数量的项目 */
.container {
display: flex;
justify-content: space-between;
}4. 使用选择器
.item + .item {
margin-left: 16px;
}最佳实践
现代项目直接用 gap，简单优雅：
.grid {
display: flex;
flex-wrap: wrap;
gap: 16px 24px; /* 行间距 16px，列间距 24px */
}