flex-grow设为1左右宽度不等，因它只分配剩余空间，初始宽度由内容决定；需用flex-basis显式设基础宽度（如30%/70%），并配合flex-shrink控制收缩行为。
flex-grow 设为 1 为什么左右宽度还是不等？
因为 flex-grow 只决定「剩余空间如何分配」，不控制初始尺寸。如果左右两栏的 content 宽度本身差异大（比如左栏有长文本、右栏是图标），浏览器会先按内容撑开基础宽度，再把剩余空间按 flex-grow 比例分——结果就是视觉上严重失衡。
- 检查是否遗漏了
flex-shrink: 0或min-width干扰了收缩行为 - 确认父容器设置了
display: flex且没有其他width/max-width限制干扰计算 - 用浏览器开发者工具查看两栏的
flex-basis实际值（常显示为auto，即内容宽度）
想严格按 3:7 分配，该设 flex-grow 还是 flex-basis？
优先用 flex-basis 显式声明基础宽度，再配合 flex-grow 处理弹性。例如：
.left { flex: 0 1 30%; }
.right { flex: 1 1 70%; }
这里 flex: 0 1 30% 等价于 flex-grow: 0; flex-shrink: 1; flex-basis: 30%，确保左栏不放大、只按比例占位；右栏允许放大填满剩余空间。比单纯设 flex-grow: 3 和 flex-grow: 7 更可控。
-
flex-grow: 0阻止内容撑宽导致比例失效 - 百分比
flex-basis相对父容器宽度计算，需父容器有明确宽度（如width: 100%或固定值） - 避免混用
width和flex-basis，否则可能触发冲突重算
文字多的侧栏总是把另一栏挤窄，怎么破？
这是 flex-shrink 默认为 1 导致的：当空间不足时，内容多的栏被压缩得更狠，反而加剧视觉失衡。解决关键是「限制最小宽度 + 控制收缩优先级」：
立即学习“前端免费学习笔记（深入）”；
- 给文字侧栏加
min-width: 0（解除 text 内容强制撑宽的默认行为） - 设置
flex-shrink: 0禁止其缩小，或调低数值（如flex-shrink: 0.5）降低收缩权重 - 配合
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;处理溢出
典型组合写法：
.text-panel {
flex: 1 0 60%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
移动端适配时 flex 比例突然错乱？
常见原因是媒体查询中只改了 flex-direction（比如切为 column），但没重置 flex-basis 单位。百分比在垂直流中仍按宽度计算，导致高度失控。
- 竖排布局下改用
flex-basis: auto或固定值（如flex-basis: 200px） - 用
flex: 1替代具体比例，让子项均分可用空间（更适应动态高度） - 检查是否有
height/max-height在响应式断点中未同步调整
关键点：flex-basis 的计算基准随 flex-direction 改变，横向用 width，纵向用 height——但你写的百分比永远参考 width。
