flex-basis 优先级更高，直接参与主轴尺寸计算，width 在 flex 容器中被忽略（除非 flex 为 none 或 0 0 auto 且未设 flex-basis）。
flexbox 中 flex-basis 和 width 冲突时谁生效？
当同时设置 flex-basis 和 width，flex-basis 优先级更高——它直接参与 flex 计算主轴尺寸，而 width 在 flex 容器中会被忽略（除非 flex 设为 none 或 0 0 auto 且未设 flex-basis）。
常见错误是给子项写 width: 200px; flex: 1;，结果宽度不固定：因为 flex: 1 展开为 flex: 1 1 0%，flex-basis 变成 0%，width 失效。
- 想固定宽度 + 允许弹性收缩：用
flex: 0 1 200px - 想固定宽度 + 禁止伸缩：用
flex: 0 0 200px（推荐） - 仅靠
width控制且不希望参与 flex 分配：加flex: none
如何让某些 flex 项固定宽度、其余项自动填满剩余空间？
典型场景：侧边栏固定宽 + 主内容区自适应。关键不是靠 width，而是用 flex 的三值语法控制伸缩行为。
.container {
display: flex;
}
.sidebar {
flex: 0 0 240px; /* 不伸缩、不收缩、基准宽 240px */
}
.main {
flex: 1; /* 等价于 flex: 1 1 0% —— 拿走所有剩余空间 */
}注意：flex: 1 的隐式 flex-basis: 0% 是关键——它让浏览器把剩余空间按比例分配，而不是基于内容宽度再计算。如果误写成 flex: 1 1 auto，内容多时可能撑破容器。
立即学习“前端免费学习笔记（深入）”；
flex-shrink: 0 能防止元素被压缩，但为什么有时还是变窄了？
根本原因：父容器主轴尺寸不足，且存在其他可收缩项时，即使某项设了 flex-shrink: 0，它仍可能因 min-width 或内容换行被迫“视觉变窄”。更隐蔽的是 white-space 和 overflow 影响。
- 确保固定项设置了
min-width: fit-content或具体值（如min-width: 120px） - 文本内容需防换行：加
white-space: nowrap - 避免父容器
overflow: hidden隐藏溢出部分造成“变窄”错觉 - 检查是否意外继承了
max-width（比如来自 CSS 框架的重置规则）
响应式中 flex 项在小屏下从“固定+流动”变成“全流动”，怎么平滑切换？
不要在媒体查询里反复改 flex 值，容易错乱。推荐统一用 flex-basis 配合 min-width 控制断点行为：
@media (max-width: 768px) {
.sidebar {
flex-basis: 100%; /* 占满整行 */
min-width: 0; /* 允许内容收缩 */
}
.main {
flex-basis: 100%;
}
}重点在于：大屏时 flex-basis: 240px + min-width: 240px 锁定宽度；小屏时改 flex-basis 为 100% 并释放 min-width，让 flex 重新按行布局。比用 display: block 切换更稳定，不破坏 flex 上下文。
真正难处理的是带复杂内边距、border 或 box-sizing 的项——它们会干扰 flex-basis 的实际占用空间，务必统一用 box-sizing: border-box。
