必须设置viewport meta标签，再用justify-content: space-between或margin-left/right: auto实现两端对齐，并添加flex-wrap: nowrap、align-items: center等细节确保小屏适配。
在 HTML5 中用 Flex 布局实现两端对齐并适配手机屏幕，关键不在“加更多代码”，而在于选对方法 + 控制容器行为 + 保证视口基础。下面分三块说清楚。
必须先设好 viewport
没有这一步，再精准的 Flex 对齐在手机上也会错位或缩放异常：
- 在 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 它让浏览器把页面宽度设为设备物理宽度，禁用默认缩放，是所有移动端 Flex 适配的前提
- 不加这行，
justify-content: space-between可能被压缩、文字溢出、按钮错位
推荐两种两端对齐写法（都兼容主流安卓/iOS）
不是所有“两端对齐”都适合移动端。以下两个方案按使用频率和稳定性排序：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
方案一：justify-content: space-between（适合固定数量子项）
适用于导航栏、工具栏等明确只有左、中、右三个元素，或左右两个按钮的场景。
写法简洁，一行 CSS 就生效，且天然响应式——只要容器宽度随屏幕变化，间距自动重算。 -
方案二：margin-left/right: auto（适合灵活结构）
当你要让“左侧图标 + 居中标题 + 右侧按钮”各自独立控制（比如标题要居中、但左右按钮必须贴边），用margin-left: auto和margin-right: auto更可靠。
它不依赖子项数量，也不受中间内容宽度影响，特别适合 H5 页面头部、弹窗操作栏。
适配手机的小细节不能漏
两端对齐在小屏上容易出问题，不是 Flex 写错了，而是没做兜底：
立即学习“前端免费学习笔记（深入）”；
-
给容器加
flex-wrap: nowrap（默认值，但显式写上更稳妥），防止子项在窄屏下意外换行导致对齐失效 -
子项避免写死宽高，尤其按钮或图标，用
max-width: 100%或flex-shrink: 1防止撑破容器 -
搭配
align-items: center，让左右元素在垂直方向也居中，视觉更稳（尤其文字+图标混排时） - 如果内容过长（如标题文字多），加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;避免挤占空间破坏对齐
