gap属性用于设置flex容器中子元素间的间距，使用display: flex并添加gap即可生效，如gap: 10px；支持横向纵向分别设置，避免margin带来的计算问题，提升布局效率。
在 Flex 布局中，可以通过 gap 属性来设置子元素之间的间距。这个属性使用起来非常简单，能有效避免传统外边距（margin）带来的计算复杂问题。
什么是 gap 属性？
gap 是 CSS 中用于定义网格或弹性容器中项目之间间距的简写属性。在 flex 容器中，它会自动在项目之间插入空隙，且不会在容器边缘产生多余空白。
如何使用 gap 设置 flex 间距
只需要在父容器上设置 display: flex 并添加 gap 即可：.container {
display: flex;
gap: 10px; /* 项目之间水平和垂直方向的间距 */
}
如果想分别设置行与列的间距，可以使用两个值：
.container {
display: flex;
gap: 10px 20px; /* 纵向间距 10px，横向间距 20px */
}
gap 的优势
- 无需再用 margin 调整子项间距，避免首尾元素多出空白
- 响应式设计中更易控制布局间隙
- 支持所有现代浏览器（包括最新版本的 Chrome、Firefox、Safari 和 Edge）
- 也可用于 grid 布局，语法一致
注意事项
gap 不会影响容器的滚动行为，但如果内容溢出，请结合 flex-wrap 或容器尺寸控制使用：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
基本上就这些。使用 gap 让 flex 布局更简洁、直观。不复杂但容易忽略。
