移动端两端对齐需规避iOS Safari和Android WebView兼容性问题：按钮组须设父容器width:100%、禁用flex:1；中文段落需text-justify:inter-character且至少两行；底部悬浮条应手动设置body padding-bottom适配高度。
移动端两端对齐不是加个 text-align: justify 就能成的，尤其在 iOS Safari 和 Android WebView 里，中文段落、按钮组、底部条这三类场景最容易翻车——直接写 justify-content: space-between 或 text-align-last: justify 往往只在 Chrome 桌面端看着正常。
移动端 flex 两端对齐为什么按钮会挤在一起
常见现象：底部悬浮条两个按钮，在 iPhone 上紧贴左边缘，右边空白；或安卓低端机里按钮错位、高度塌陷。根本原因不是 CSS 写错了，而是 position: fixed 容器 + display: flex 在旧版 WebKit 中对 justify-content 的解析不一致。
- 必须显式给父容器设
width: 100%，不能依赖max-width或fit-content，否则 Safari 会按视口宽度而非可视区域计算分配空间 - 子元素不能设
flex: 1或width: 100%，否则它们会抢占全部可用宽度，space-between失效 - 避免用
margin-left: auto混搭justify-content，iOS 15.3 及更早版本会忽略auto并重置对齐逻辑 - 如果按钮含图标+文字，确保
white-space: nowrap关闭，否则换行判断异常导致最后一行被当单行处理
中文段落 text-align: justify 在手机上完全没反应
这不是 bug，是规范行为：移动端浏览器（尤其是 Safari）默认只在 Unicode 单词边界（空格、标点）插入弹性间距，而中文没有这些边界，所以整段文字被当成“一行”处理，justify 直接跳过。
- 必须同时设置
text-justify: inter-character，但注意它仅在 Chrome 120+、Safari 17.4+、Firefox 110+ 支持；iOS 16.6 仍不支持 - 容器要有明确宽度（如
width: 100vw或max-width: 500px），不能是fit-content或未设宽的div - 段落内容需至少两行才可能触发对齐，单行文本永远左对齐——可在末尾加
（零宽空格）强制换行，但复制时会带出异常字符 - 更稳妥的做法：放弃全段 justify，改用
text-align: left+letter-spacing: 0.05em+ 左右padding控制视觉节奏
底部悬浮条盖住内容且无法响应高度变化
移动端 fixed 元素不会推高文档流，padding-bottom 必须手动设，且值要等于条的高度——但很多项目用 JS 动态生成条高（比如多语言文案导致按钮变高），纯 CSS 无解。
- 不要用
margin-bottom，它对 fixed 元素无效，也不占位 - 若条高固定（如 60px），直接在
body上加padding-bottom: 60px - 若高度动态，监听
resize事件并更新document.body.style.paddingBottom，别用orientationchange——它在 iOS 16+ 已废弃 - 避免在 fixed 容器内用
transform: translateY()调整位置，某些 Android WebView 会丢失对齐计算上下文
真正难的不是写出能跑的代码，而是判断哪一段该用 flex、哪一段该退回到 inline-block + ::after 补宽、哪一段干脆放弃两端对齐——移动端的“两端”，本质是权衡兼容性、可维护性和视觉可信度的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
