只改 flex-basis 就能切换分栏状态，因其决定 Flex 项分配剩余空间前的初始尺寸，优先级高于 width；设为 0 后主内容区自动占满，配合 min-width: 0 防止溢出滚动条。
为什么只改 flex-basis 就能切换分栏状态
因为 flex-basis 决定了 Flex 项在分配剩余空间前的“初始尺寸”，它比 width 更底层、更优先。当媒体查询触发时，直接修改侧边栏的 flex-basis（比如从 240px 变成 0），浏览器会立刻重算布局，主内容区自动占满——不需要改 display、不用删 DOM、也不用 JS 操作类名。
关键点在于：flex: 0 0 240px 中的第二个 0 是 flex-shrink: 0，它锁死了收缩行为；而 flex-basis 是唯一能在不破坏这个锁定的前提下，安全“归零”侧边栏视觉宽度的属性。
- 错误做法：在媒体查询里写
.sidebar { width: 0; }→ 它会被flex-shrink: 1覆盖或干扰，尤其在窄屏下可能残留几像素 - 正确链路：
flex: 0 0 240px→@media (max-width: 768px) { .sidebar { flex-basis: 0; } } - 注意：
flex-basis: 0不等于隐藏，它只是让该项“不占空间”，仍需配合opacity: 0或transform: translateX(-100%)实现视觉收起
min-width: 0 是防止横向滚动条的隐形开关
主内容区设了 flex: 1 后，你以为它会老老实实填满？错。默认情况下，Flex 子项有隐式最小宽度（min-width: auto），会阻止它被压缩到文字换行以下——结果就是内容溢出，出现意外的横向滚动条。
必须手动给主内容区加 min-width: 0，告诉浏览器：“允许我缩到 0，哪怕里面有个超长 URL”。这是所有 Flex 响应式分栏中最常漏掉的一行 CSS。
立即学习“前端免费学习笔记（深入）”；
- 漏掉它：小屏下
flex: 1区域拒绝收缩，容器撑宽，滚动条弹出 - 加上它：
.main { flex: 1; min-width: 0; }，再配合word-break: break-word，文本才真正可控 - 别信“父容器 overflow-x: hidden 能兜底”——它只是藏起滚动条，不解决溢出根源
响应式断点只需控制一栏，别碰整体结构
很多人一写媒体查询就习惯性重写整个布局：改 display、加 position: fixed、切 flex-direction……其实大可不必。现代 Flex 布局足够健壮，只要侧边栏的 flex-basis 归零，主内容区就会自然伸展，连 flex: 1 都不用动。
真正要做的，只是在断点内精准干预那个需要“消失”的栏，并处理它的视觉收起逻辑：
- 移动端收起侧边栏：
@media (max-width: 768px) { .sidebar { flex-basis: 0; opacity: 0; transform: translateX(-100%); } } - 同时确保主内容区没被遮挡：
.main { flex: 1; }保持不变，但记得加overflow: hidden或用transition平滑动画 - 完全没必要在媒体查询里重复写
display: flex或重设flex-direction，那是对 Flex 机制的不信任
用 flex 缩写代替分散声明，避免覆盖陷阱
写 flex-grow: 0; flex-shrink: 0; flex-basis: 240px; 看似清晰，但容易在后续维护中被局部样式覆盖（比如某处误加了 flex-shrink: 1）。直接用 flex 缩写能原子化锁定三值，语义明确，不易被拆解。
而且浏览器解析 flex 缩写时优先级更高，不会被单个属性覆盖：
- 推荐写法：
.sidebar { flex: 0 0 240px; }（等价于 grow=0, shrink=0, basis=240px） - 危险写法：
.sidebar { width: 240px; flex-shrink: 0; }→width在 Flex 上无效，且flex-shrink单独写可能被其他规则干扰 - 更危险：
.sidebar { flex: 1; width: 240px; }→flex: 1会覆盖width，实际表现不可控
复杂点永远在细节：你改的不是宽度，是浏览器计算布局的起点；你漏的不是一行 CSS，是整页在窄屏下是否出现滚动条的决定权。
