用flex-1实现右侧自适应，必须配flex-shrink-0给左侧、min-w-0给右侧，且父容器有明确宽度（如w-full或100vw），否则小屏下易溢出；原因在于左侧未锁缩放、右侧内容最小宽限制及父容器缺宽度上下文。
用 flex-1 实现右侧自适应，必须配 flex-shrink-0 给左侧、min-w-0 给右侧，且父容器得有明确宽度来源（比如 w-full 或 100vw）——否则在小屏下大概率溢出或失效。
为什么 flex-1 在移动端常“不生效”
不是类名写错了，而是三个隐藏条件没满足：
- 左侧没加
flex-shrink-0→ 小屏时被压缩，挤占本该分给右侧的空间 - 右侧没设
min-w-0→ Flex 默认会让子项最小宽度不低于内容自身宽度（比如长 URL、未换行文本），导致它拒绝收缩、横向滚动条意外出现 - 父容器没显式宽度（如只写
flex却漏了w-full）→ 剩余空间算不出来，flex-1就没东西可分 - Safari 14–15 下，右侧若带
p-4或border却没box-border，会把边框当内容宽来算剩余空间，结果右侧变窄甚至消失
flex-none 和 flex-[0_0_240px] 的区别在哪
两者都能锁住侧栏宽度，但语义和行为不同：
-
flex-none等价于flex: 0 0 auto，依赖子元素自身 width 或内容撑开，不稳定；尤其在嵌套 flex 容器里容易被父级flex-wrap干扰 -
flex-[0_0_240px]是 Tailwind 的任意值语法，等价于flex: 0 0 240px，明确声明flex-basis，真正锁定宽度，推荐用于固定侧栏 - 别用
w-60单独控制侧栏宽——它只是初始盒模型尺寸，仍可能被flex-shrink压缩；flex-[0_0_240px]才是 Flex 层语义上的“不可缩”
响应式收起侧栏时，hidden 类为什么不能直接用
hidden 会触发重排、焦点丢失、动画生硬，且破坏可访问性：
- 视觉上消失，但 DOM 位置和 tab 键顺序仍存在，屏幕阅读器可能误读
- 直接移除元素会导致布局抖动，尤其在有 transition 的容器中
- 更平滑的做法：用
md:flex-[0_0_240px]+sm:flex-[0_0_0]控制flex-basis，再配合sm:opacity-0 sm:translate-x-[-100%]和transition-all - 主内容区保持
flex-1，它会自动占满全宽，无需额外 media query 重写
移动端切单栏时，order 类最容易被忽略的坑
很多人加了 md:order-1 就以为完事，结果小屏下焦点顺序错乱、SEO 友好性归零：
- DOM 顺序必须是「中栏 → 左栏 → 右栏」，这是语义基础；
order只负责视觉排列，不能补救结构缺陷 - 小屏下必须显式清除 order 影响：
sm:order-none或删掉所有order-类，否则旧值继承导致堆叠错位 - 侧栏在小屏下要加
sm:w-full，否则残留的md:w-64会导致横向溢出 - 测试时务必打开 DevTools 切换设备尺寸，用键盘 tab 检查焦点流是否匹配视觉顺序
最易被跳过的其实是 min-w-0 —— 它不写，主内容区在窄屏下就可能拒绝收缩，哪怕你写了 flex-1，也会因为内部一个未换行的 URL 而撑破容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
