Flex布局适合做移动端底部导航栏，因其能固定定位、均分空间、控制最小高度且比float/grid更轻量可控；配合justify-content和flex:1可实现图标文字水平均匀分布与等宽，box-sizing:border-box避免宽度溢出。

flex布局为什么适合做底部导航栏 移动端底部导航栏需要固定在视口底部、水平均匀分布图标文字、点击区域足够大，且要适配不同屏幕宽度。Flex天然支持主轴对齐、等分空间、最小高度控制，比float或inline-block更可控，也比grid在简单一维布局中更轻量。

• display: flex 配合 justify-content: space-between 或 space-around 能快速实现图标间距均分
• flex: 1 可让每个导航项自动等宽（注意：需配合 min-width: 0 防止内容撑开）
• 固定定位时，bottom: 0 + width: 100% 是基础，但必须加 box-sizing: border-box 避免 padding 导致宽度溢出

关键CSS写法与常见错误 底部导航栏最常出问题的是：图标错位、文字换行、点击热区太小、iOS Safari下被输入法顶起。

• 父容器必须设为 display: flex，并用 position: fixed + bottom: 0 锚定
• 每个导航项（.nav-item）推荐用 flex: 1 + text-align: center + padding: 8px 0（避免只靠行高撑高）
• 图标和文字需包裹在块级元素内，否则 img 或 svg 默认是 inline，易受基线对齐干扰；加 vertical-align: middle 或设 display: block
• iOS Safari 中，若页面有 <input> 且聚焦，fixed 元素可能被键盘顶起——此时需监听 focusin/focusout 动态加 transform: translateY(0) 强制重绘

.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #fff;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}
.nav-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}
.nav-item img {
  display: block;
  margin: 0 auto 2px;
  width: 24px;
  height: 24px;
}

如何让选中态视觉反馈更可靠 底部导航的激活态（active）不能只依赖 :hover，移动端没有 hover；也不能只靠 JS 切 class，得兼顾可访问性（a11y）和 SSR 渲染一致性。

• 必须用 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></a> 包裹整个 .nav-item，而非只包文字或图标
• 激活态样式优先使用 [aria-current="page"]，比自定义 .active 更语义化，且服务端可直接输出
• 颜色变化不够明显？加 font-weight: 600 和底部短横线（border-bottom: 2px solid #007aff），但横线高度需控制在 2px 内，避免遮挡图标
• SVG 图标建议用 fill 控制颜色，不要用 background-image，否则无法通过 CSS 变量或伪类切换

兼容老版本Android WebView的坑 部分 Android 4.4–5.1 的 WebView 对 flex: 1 解析异常，会导致最后一个导航项宽度归零或溢出。

• 替代方案：不用 flex: 1，改用 flex: 0 0 25%（假设4个tab），并确保父容器 flex-wrap: nowrap
• 必须加 max-width: 100% 到每个 .nav-item，防止长文字在低版本中撑破布局
• 测试时务必在真机上打开 Chrome DevTools 的 “Network → Disable cache” + “Rendering → Emulate touch screen”，否则模拟器容易漏掉渲染bug

实际项目里，最易被忽略的是 pointer-events: none 被误加在图标上，导致整个 a 标签点击失效——检查是否在 SVG 或伪元素上写了这句，删掉就行。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载