用flex实现移动端底部导航栏需设body为column方向的flex容器并min-height:100vh，主体内容flex:1撑开空间，导航栏作为末子元素设height+justify-content:space-around，导航项用flex:1 1 0、min-width:0及flex布局确保等宽可点，并适配安全区与点击反馈。
用 Flex 实现移动端底部固定导航栏的均分对齐，关键不在“固定”本身，而在于**让导航栏自然停在底部、不遮内容，同时内部图标文字等宽可点**。直接用 position: fixed 容易出兼容问题，尤其是 iOS 软键盘弹起时错位，或 justify-content: space-around 失效。Flex 布局能兼顾结构语义、滚动适配和视觉均分。
整体页面设为垂直 Flex 容器
把 body（或外层包裹容器）作为根 Flex 容器，方向设为 column，并确保它有明确高度参考：
-
html, body { margin: 0; height: 100%; }—— 必须清除默认 margin 并设满高，否则flex: 1无依据 -
body { display: flex; flex-direction: column; min-height: 100vh; }—— 用min-height: 100vh比单纯height: 100%更稳妥，兼容软键盘弹出场景 - 主体内容区域（如
<main></main>或<div class="content">）加 <code>flex: 1，自动撑开剩余空间，把底部导航“顶”到最下方底部导航容器设固定高度 + Flex 均分
导航栏自身不要用
position: fixed，而是作为body的最后一个子元素，靠 Flex 布局自然落底：
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
.footer-nav { height: 60px; display: flex; justify-content: space-around; align-items: center; }—— 显式设height是space-around正常工作的前提 - 避免写
flex: 0 0 auto，iOS Safari 对这个组合解析不稳定；统一用height控制尺寸更可靠 - 若需适配 iPhone X 及以上安全区，加
padding-bottom: env(safe-area-inset-bottom)，防止被圆角/指示条裁切
导航项实现真正等宽 & 可点热区一致
光靠
flex: 1在按钮内或文字长度差异大时会失效（Safari 会按文字撑宽），必须加约束：- 每个导航项（如
<a></a>或<button></button>）设：flex: 1 1 0; min-width: 0; - 再加
display: flex; flex-direction: column; align-items: center;—— 让图标+文字垂直居中，且文字不换行溢出 - 文字用
font-size和line-height控制高度，避免因字号不同导致视觉不齐；图标统一用width/height或 inline SVG 固定尺寸
补一个实用细节：点击反馈与安全区
移动端用户需要明确的点击反馈，同时不能让导航栏被系统 UI 吞掉：
- 给每个导航项加
touch-action: manipulation;提升点击响应速度 - 背景色建议用不透明色（如
#fff），避免半透叠加后文字对比度不足 - 在
中加<meta name="viewport" content="viewport-fit=cover">，配合env(safe-area-inset-bottom)才能生效
-
