flex-basis没起作用的根本原因是被width/height显式覆盖、flex简写重置（如flex:1设为0%）、方向不匹配（row/column混淆）、父容器主轴尺寸未定义或嵌套中百分比失去参照，以及align-items:stretch等隐式样式干扰。
flex-basis 为什么没起作用
写了 flex: 0 0 200px 或 flex-basis: 30%，但子项宽度/高度就是不按预期渲染——根本原因不是属性写错，而是它被其他 CSS 隐式覆盖或浏览器计算逻辑绕过了。
-
flex-basis只在flex-direction: row时控制主轴初始宽度，在column时控制初始高度；写反方向就完全无效 - 如果子项同时设了
width（或height），且值不为auto，它会直接覆盖flex-basis—— 浏览器优先用显式尺寸，flex-basis退为备选 -
flex: 1等价于flex: 1 1 0%，此时flex-basis: 0%会让内容宽度失效；而flex: auto是flex: 1 1 auto，才真正尊重文字、图片等固有尺寸 - 用开发者工具检查 computed 样式，看
flex-basis最终值是不是你写的那个数；如果是auto或0px，说明被简写或重置覆盖了
子元素 width/height 设置被忽略
给 Flex 子项硬写 width: 300px 却没效果，不是浏览器 bug，是 Flex 布局主动接管了尺寸分配逻辑。
- Flex 子项的尺寸由
flex-grow、flex-shrink和flex-basis共同决定，width只作为flex-basis的 fallback，不参与最终空间分配 - 想锁定宽度，必须禁用拉伸和收缩：
flex: 0 0 300px（比单独写width: 300px更可靠） - 若父容器是
flex-direction: column，width不会被忽略，但height同样受flex-basis主导；此时设height: 200px也不一定生效 - 特别注意：某些 UI 框架（如 Ant Design）会给子项加
min-width: 0或重置flex，会悄悄改掉你的flex-basis行为
百分比 flex-basis 在嵌套中算不准
flex-basis: 50% 在多层 Flex 嵌套里常“缩水”或撑开，因为百分比始终相对于**直接父容器主轴尺寸**，而嵌套后父容器尺寸可能还没稳定。
- 外层容器若没设明确宽高（比如
height: auto），内层flex-basis: 50%就按0px算——结果就是子项高度/宽度为 0 - Android WebView 旧版本对
flex-wrap: wrap+ 百分比flex-basis有重排 bug，表现为换行错乱或尺寸跳变 - 替代方案：用
flex: 0 0 50%（即固定不缩放）代替flex-basis: 50%；或改用flex: 1配合固定列数 wrapper - 调试技巧：临时给每一层父容器加
outline: 1px solid #000，确认它们的实际尺寸是否如你所设
align-items: stretch 暗中干扰 flex-basis
明明设了 flex-basis: 200px，子项却撑满整个容器高度——不是 flex-basis 失效，而是 align-items: stretch（默认值）强制拉伸了交叉轴尺寸，掩盖了主轴基准。
-
align-items: stretch只影响交叉轴（垂直于flex-direction），但它会让子项在该轴方向填满容器，视觉上“盖住”了你在主轴设的flex-basis - 验证方法：给子项加
min-height: 0或align-self: flex-start，再看flex-basis是否恢复作用 - 如果子项是文字块，
white-space: nowrap会阻止换行，让flex-basis更容易体现；否则换行后内容高度变化，也会干扰基准表现 - 别在同一个子项上同时写
height和flex-basis，尤其当flex-direction: column时，height会被忽略，但flex-basis还是有效——只是你没意识到方向已切换
flex-basis 不是一个独立生效的属性，它永远活在 flex-grow/flex-shrink、父容器尺寸、文本换行、甚至框架重置样式构成的连锁反应里。最容易被忽略的是：你以为在调宽度，其实浏览器正在按高度算空间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
