如何在CSS中用flex实现移动端App底部导航栏？-css教程-PHP中文网

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

如何在css中用flex实现移动端app底部导航栏？

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 中，若页面有且聚焦，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;
}