通过flex-wrap和gap属性可实现自适应底部导航栏：设置flex-wrap: wrap允许换行，避免溢出；使用gap统一控制项间距，确保视觉整齐。结合flex布局的响应性，导航项在窄屏下自动换行并保持均衡间隙，提升移动端体验。
在使用CSS Flexbox布局时，实现底部导航栏的自适应排列非常实用，尤其在移动端或响应式设计中。通过flex-wrap和gap属性，可以轻松控制导航项的换行与间距，使布局更灵活美观。
使用 flex-wrap 实现自动换行
默认情况下，Flex容器中的子元素会排在一行（或一列）中。当导航项较多或屏幕较窄时，内容可能溢出。通过设置flex-wrap，可以让子元素在空间不足时自动换行。
-
flex-wrap: wrap;允许子元素换行 -
flex-wrap: nowrap;强制单行（默认） -
flex-wrap: wrap-reverse;反向换行（较少用）
将底部导航容器设为Flex并启用换行，确保小屏幕上导航项能垂直堆叠或分多行显示。
利用 gap 属性统一设置间距
gap属性用于设置Flex或Grid容器中子元素之间的间隔，无需额外处理边距，避免外边距合并问题。
立即学习“前端免费学习笔记（深入）”；
优势：
- 自动在项目之间添加水平和垂直间距
- 不作用于容器边缘，避免首尾元素贴边
- 支持
row-gap和column-gap分别控制行列间距
例如：gap: 10px 20px; 表示行间距10px，列间距20px，让导航项之间保持一致呼吸感。
完整示例：响应式底部导航栏
结合两者，可构建一个在不同屏幕下自动调整布局的底部导航栏。
CSS 示例：
.bottom-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 16px;
padding: 12px;
background: #f8f8f8;
position: fixed;
bottom: 0;
width: 100%;
}
.nav-item {
flex: 1 1 80px; / 最小宽度约80px，可伸缩 /
text-align: center;
font-size: 14px;
}
这样，每个导航项最小宽度为80px，在窄屏下自动换行，且项目间有均匀间隙，视觉整齐。
基本上就这些，不复杂但容易忽略细节。合理使用flex-wrap和gap，能让底部导航既自适应又美观。
