flex-basis设为0px时子元素忽略内容尺寸，从零按flex-grow分配空间；设为auto时先按内容宽高确定基础大小再伸缩，易导致分配不均。
flex-basis设为0px和auto有什么实际区别
设为 0px 时，子元素完全忽略自身内容宽度（或高度），从零开始按 flex-grow 分配剩余空间；设为 auto 时，先按内容尺寸（或 width/height）确定基础大小，再参与伸缩。很多人误以为 auto 就是“自动适配”，其实它会把文字换行、图片原始宽高都算进去，导致 flex-grow 分配不均。
常见错误现象：flex-basis: auto 下，一个带长文本的项撑开整行，旁边图标按钮被压缩到看不见；换成 0px 后布局立刻均匀。
-
flex-basis: 0px+flex-grow: 1是实现等分布局最可靠组合（尤其在按钮组、标签栏场景） - 百分比值（如
flex-basis: 25%）基于父容器主轴尺寸计算，但若父容器没设明确宽度，结果可能意外（比如在position: absolute容器里） - IE11 对
flex-basis: 0%支持有问题，必须写成flex-basis: 0px
为什么写了flex-basis却没生效
最常见原因是同时设置了 width 或 height —— 当主轴方向与元素宽高轴一致时（比如 flex-direction: row 下的 width），CSS 规范规定：若 flex-basis 不为 auto，则 width / height 会被忽略；但反过来，如果 flex-basis 是 auto，而你又写了 width，那 width 才真正起作用。
使用场景：你想让卡片在小屏下占满一行、大屏下三等分，别这么写：width: 33.333%; flex-basis: auto; —— 这会让 flex-basis 形同虚设。应该直接用 flex-basis: 33.333%，并确保父容器有明确宽度。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed style，看浏览器最终解析出的
flex-basis值是不是你写的那个（有时会被重置为auto） - 用
flex: 1 1 200px替代单独写flex-basis更安全，避免被其他 flex 相关属性干扰 - Flex item 设了
min-width: auto（默认值）时，即使flex-basis是0px，内容仍可能撑大它——这时加min-width: 0才真正“放开限制”
flex-basis百分比在嵌套Flex容器里怎么算
百分比始终相对于**直接父容器的主轴尺寸**，不是最外层容器，也不是视口。比如三层嵌套：外层 flex-direction: column，中间层 row，内层又是 column，那么内层子项的 flex-basis: 50% 是按中间层容器的宽度算的，跟外层高度无关。
容易踩的坑：在响应式菜单中，把导航项 flex-basis: 20% 写死，结果在手机上因父容器变窄，所有项挤成一团甚至换行——这不是 flex-basis 的问题，而是没配合 flex-wrap: wrap 或媒体查询调整百分比。
- 嵌套时优先考虑用
flex: 1或固定像素值，百分比只在父容器尺寸稳定时才靠谱 - 用
max-width配合百分比flex-basis，防止极端缩放下溢出（比如flex-basis: 30%; max-width: 200px;） - 不要指望
flex-basis: 100%让子项独占一行——它只表示“基础大小占满父容器”，伸缩后仍可能被压缩或拉伸
flex-basis和box-sizing的关系
flex-basis 只管内容区（content box）的尺寸，不包含 padding、border、margin。如果你给元素设了 padding: 10px 和 box-sizing: border-box，flex-basis: 100px 的结果是：内容区宽 100px，加上内边距和边框后总宽肯定超 100px。
这会导致两个问题：一是与其他未设 padding 的兄弟项对不齐；二是当 flex-grow: 1 时，浏览器按内容区分配空间，视觉上反而显得更窄。
- 统一用
box-sizing: border-box是底线，否则 padding/border 会让flex-basis失去可预测性 - 如果必须用 padding，把
flex-basis值手动减去左右 padding（比如padding: 0 12px→flex-basis: calc(100px - 24px)） - 慎用
flex-basis配合font-size动态变化——文字变大后内容区膨胀，但flex-basis不会自适应
事情说清了就结束。注意 flex-basis 不是万能尺子，它只在 Flex 布局主轴上有意义，且极易被其他样式规则覆盖。真要稳，就少依赖百分比，多用 0px + flex-grow 组合，再补一句 min-width: 0。
