必须设置viewport meta标签，再用justify-content: space-between或margin-left/right: auto实现两端对齐，并添加flex-wrap: nowrap、align-items: center等细节确保小屏适配。

在 HTML5 中用 Flex 布局实现两端对齐并适配手机屏幕，关键不在“加更多代码”，而在于选对方法 + 控制容器行为 + 保证视口基础。下面分三块说清楚。

必须先设好 viewport

没有这一步，再精准的 Flex 对齐在手机上也会错位或缩放异常：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 在 中加入：
  
• 它让浏览器把页面宽度设为设备物理宽度，禁用默认缩放，是所有移动端 Flex 适配的前提
• 不加这行，justify-content: space-between 可能被压缩、文字溢出、按钮错位

推荐两种两端对齐写法（都兼容主流安卓/iOS）

不是所有“两端对齐”都适合移动端。以下两个方案按使用频率和稳定性排序：

• 方案一：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; 避免挤占空间破坏对齐

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！