主栏设 flex: 1 0 0（可增长、不收缩、无基准宽），副栏设 flex: 0 0 280px（不增长、不收缩、固定基准宽），容器需 display: flex 且明确 flex-direction；默认 flex-shrink: 1 会导致主栏被压缩，故必须显式禁用。
用 flex-grow 实现主副栏自动伸缩的关键逻辑
主栏占剩余空间、副栏固定宽度（或按比例收缩），核心不是给主栏设 flex: 1 就完事，而是要明确谁「不收缩」、谁「可增长」。默认情况下所有 flex 项都可能压缩（flex-shrink: 1），如果副栏内容多又没限制，它会把主栏挤变形。
- 主栏设
flex-grow: 1，且显式加flex-shrink: 0防被压缩 - 副栏设固定宽（如
width: 280px）或用flex: 0 0 auto锁死尺寸 - 容器必须有
display: flex和明确的flex-direction: row（默认就是）
为什么只写 flex: 1 常常失效
flex: 1 是 flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 的简写。问题出在 flex-shrink: 1 —— 当容器宽度不够时，浏览器会按比例压缩所有 flex 项，包括你本想撑满的主栏。
- 副栏图片/文字过长 → 触发整体压缩 → 主栏变窄甚至换行
- 解决办法：主栏改用
flex: 1 0 0（即flex-grow: 1,flex-shrink: 0,flex-basis: 0） - 副栏用
flex: 0 0 280px比单纯width更稳妥，避免 margin/padding 干扰计算
完整可运行的两栏 flex 布局代码
.container {
display: flex;
}
.main {
flex: 1 0 0; /* 可增长、不收缩、无初始基准宽 */
}
.aside {
flex: 0 0 280px; /* 不增长、不收缩、基准宽 280px */
}移动端适配时容易漏掉的点
flex 布局在小屏下直接堆叠两栏很常见，但很多人忘了关掉 flex-shrink 的副作用：即使写了 @media 切成 column，若主栏仍带 flex-shrink: 1，在某些安卓 WebView 中仍可能异常压缩。
- 响应式切换时，建议用
flex-direction: column+ 重置flex值，例如：flex: 1 1 auto - 副栏在小屏下若隐藏，别只靠
display: none，否则 flex 容器仍按两栏计算——应配合flex: 0 0 0或移除元素 - iOS Safari 对
flex-basis: 0渲染略保守，加min-width: 0给主栏能进一步防溢出
主副栏伸缩看着简单，真正卡住的往往不是语法，而是 flex-shrink 默认开启和 flex-basis 的隐式行为。动手前先想清楚：谁该让，谁不让。
立即学习“前端免费学习笔记（深入）”；
