flex: 1 不等宽因等价于 flex: 1 1 0px，子项从0开始分剩余空间，受固有尺寸（如图片、nowrap文本）干扰；需加 min-width: 0 或 box-sizing: border-box 修复。
flex: 1 在多栏布局中为什么经常“不等宽”
因为 flex: 1 不是“均分容器”，而是“按剩余空间弹性拉伸”。它等价于 flex: 1 1 0px，第三个参数 0px 意味着初始主轴尺寸为 0，所有子项从零开始瓜分剩余空间——但前提是它们没有固有尺寸干扰。
常见错误现象：flex: 1 下两栏，一栏放了长文本或图片，另一栏却缩成一条线；或者加了 padding/border 后宽度溢出。
- 使用场景：侧边栏 + 主内容区、表单左右两列、卡片内图标+文字区域
- 关键点：若子元素有
min-width（如图片默认不缩小）、white-space: nowrap（阻止文本换行）、或设置了固定width，flex: 1就会被顶开 - 解决办法：对可能撑开的子元素加
min-width: 0或overflow: hidden，强制允许压缩
flex: 1 1 auto 和 flex: 1 1 0 的实际区别
差别就在第三个参数（flex-basis）：一个是“按内容宽度起步”，一个是“从 0 起步”。这直接影响第一轮分配前的初始占位。
比如两个 div 并排，都设 flex: 1（即 flex: 1 1 0），内容分别是 “A” 和 “Very long label here”——后者会拿走更多空间；而如果写成 flex: 1 1 auto，两者初始就按自身内容宽度占位，再平分剩余空间，结果更接近“视觉等分”。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1 1 0：适合需要严格填满容器、且内容可截断/隐藏的场景（如导航菜单项） -
flex: 1 1 auto：适合希望保留内容自然宽度、只在有空余时才拉伸的场景（如表单项标签+输入框组合） - 注意：IE11 对
auto支持不稳定，生产环境慎用；0兼容性更好
多栏用 flex: 1 时，border/padding 导致换行或溢出
这是盒模型没算准的典型表现。默认 box-sizing 是 content-box，flex: 1 分配的是内容区宽度，但 padding 和 border 会额外加在上面。
错误现象：三栏布局，每栏 flex: 1，但加了 1px solid 后第三栏掉到下一行；或者设置了 padding: 16px，内容被挤出容器。
- 必做：给所有 flex 子项统一加
box-sizing: border-box - 别依赖父容器
padding来留白，改用子项自身的margin（flex 容器会忽略子项的 margin 折叠） - 如果要用
gap（推荐），确保浏览器支持（Chrome 84+/Firefox 63+），否则退回到margin手动模拟
在 grid 布局里还该不该用 flex: 1
不该。CSS Grid 天然更适合多维等分，flex: 1 是一维弹性方案，在二维场景下容易绕弯。
比如想实现“左侧固定 200px，右侧自适应”，grid 写法是 grid-template-columns: 200px 1fr；而 flex 需要额外包裹、设 flex: 0 0 200px 和 flex: 1，还容易被子内容反向影响。
- Grid 的
1fr是真正按比例分配可用空间，不受子元素min-width干扰（除非显式设了min-width: min-content） - Flex 的
flex: 1在嵌套多层 flex 容器时，计算逻辑会叠加模糊，调试成本高 - 结论：只要目标是行列明确的等分/固定+自适应组合，优先用 grid；只有单行/单列动态伸缩才用 flex
真正麻烦的不是写法，而是忘记 min-width: 0 或 box-sizing: border-box 这类细节——它们不会报错，但会让布局在某个字体大小、某张图片加载后突然崩掉。
