最可靠解法是用 display: flex + @media 切换 flex-direction；只设 flex 会导致小屏布局错乱，需用 max-width: 600px 或 calc(100vw - 2rem) 设断点，单列时重置子项宽度并加 min-width: 0 和 overflow-wrap: break-word。
直接用 display: flex + @media 切换 flex-direction，是最可靠、最易维护的解法。 其他方式要么兼容性差（如 grid 在旧安卓 WebView 中挂掉），要么响应式行为不可控（如 float 隐藏后不清除会连锁影响后续元素）。
为什么不能只写 display: flex 就完事？
只设 display: flex 会让两栏在所有屏幕下强行并排——小屏上文字折行、按钮错位、甚至触发横向滚动条。关键不是“能不能排成两栏”，而是“什么时候该切单列”。
- 断点别硬写
max-width: 768px：iPad 竖屏是 768px，但很多安卓平板和折叠屏设备宽度接近或略超，反而卡在临界点出错 - 推荐用
max-width: 600px或max-width: calc(100vw - 2rem)，前者覆盖绝大多数手机，后者随视口动态缩放，更鲁棒 - 别依赖设备像素比或
orientation媒体查询——横屏手机仍需单列，竖屏平板未必能撑开两栏
flex-direction: column 之后，子项宽度怎么设？
切到单列后，如果子项还保留 width: 50% 或 flex-basis: 50%，会导致内容只占半屏，留大片空白。此时必须重置宽度逻辑。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器加
flex-direction: column后，子项默认width: auto，通常已够用；若需强制铺满，加width: 100% - 避免给子项写死
width，改用flex: 0 0 auto（不伸缩、不收缩、按内容宽）或flex: 1（均分剩余空间） - 如果右侧主内容有长 URL 或未换行文本，务必加
min-width: 0和overflow-wrap: break-word，否则它会撑破布局
左侧固定 + 右侧自适应，在移动端怎么平滑收起？
直接 display: none 会破坏焦点流、动画卡顿、且无法键盘导航。更合理的做法是视觉隐藏但保留在可访问流中。
- 用
transform: translateX(-100%)+visibility: hidden组合，CSS 动画友好，不影响 tab 键顺序 - 配合
pointer-events: none防止误触，但记得在显示时同步还原 - 如果用 JS 控制显隐，别只切 class，要同步操作
aria-hidden="true"和inert属性（现代浏览器支持） - Safari 14–15 下，若右侧区域有
padding却没设box-sizing: border-box，flex: 1会把 padding 当作内容宽计算，导致右侧变窄甚至消失
真正容易被忽略的不是“怎么堆叠”，而是堆叠后内容是否还能自然折行、是否意外触发 overflow-x: scroll、以及屏幕阅读器能否正确识别 DOM 顺序。检查时重点看 min-width: 0 是否漏加、overflow-wrap 是否生效、还有父容器有没有漏设 width: 100% 提供 flex 主轴上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
