移动端两列自适应布局首选 display: flex，因其兼容性好且稳定；display: grid 更简洁但需显式定义 grid-template-columns，否则子项会堆叠在第一列；老方案（float、inline-block、absolute）仅适用于极旧环境。
移动端两列自适应布局，用 display: flex 最稳；display: grid 更简洁但需防漏写 grid-template-columns；老方案（float、inline-block、absolute）现在只适合兼容极旧环境，不建议新项目用。
为什么 flex: 1 在小屏下常“没反应”
不是语法错了，是三个隐藏条件没满足：
- 左侧没加
flex-shrink: 0→ 小屏时被压缩，把本该分给右侧的空间抢走了 - 右侧没设
min-width: 0→ 长 URL、连续英文、未换行文本会强制撑宽容器，导致横向溢出或滚动条意外出现 - 父容器没显式宽度（比如只写
display: flex却漏了width: 100%或100vw）→ Flex 剩余空间算不出来，flex: 1就没东西可分 - Safari 14–15 下，右侧若带
padding或border却没box-sizing: border-box，会把边框当内容宽来算，结果右侧变窄甚至消失
grid-template-columns: 200px 1fr 必须显式写
Grid 不会自动“猜”你想左定右自适应——只写 display: grid 而不设列轨道，两个子项默认堆在第一列。
- 正确写法：
grid-template-columns: 200px 1fr（左侧 200px 固定，右侧占满剩余） - 留间隙用
gap: 16px，别用margin—— Grid item 上的 margin 行为不稳定，尤其在 Safari 中可能被忽略 - 右侧含长文本时，必须加
overflow-wrap: break-word和min-width: 0，否则换行失效 - 响应式切换时，直接重写
grid-template-columns，比如@media (max-width: 768px) { grid-template-columns: 1fr; }
响应式收起左侧栏时，别用 display: none
它会导致重排抖动、焦点丢失、动画生硬，还破坏可访问性：
-
display: none后，DOM 位置和 tab 键顺序仍存在，屏幕阅读器可能误读 - 更平滑的做法：用
flex-basis控制宽度，比如sm:flex-[0_0_0px]（Tailwind）或@media (max-width: 640px) { .sidebar { flex: 0 0 0; } } - 配合
opacity: 0+transform: translateX(-100%)和transition-all实现视觉隐藏，主内容区保持flex: 1自动占满全宽
真正容易被忽略的点是：移动端布局崩坏往往不是 flex 或 grid 本身的问题，而是祖先节点缺高度来源（比如没设 min-height: 100vh）、被 overflow: hidden 截断，或者左右栏的 flex-basis 被浏览器按内容隐式计算干扰了。检查时优先盯住这三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
