span在flex容器中width失效，根本原因是其默认display: inline，不支持width；即使父级为flex，也需显式设display: inline-block或flex: 0 0 200px才能生效。
span在Flex容器里width失效，是因为它默认是内联元素
直接给span写width: 200px却没反应，不是CSS写错了，而是span天生不认width——它是display: inline元素，而内联元素的宽高属性在标准模式下被浏览器忽略。
Flex容器不会自动“升级”子元素的显示类型。哪怕父级是display: flex，span依然保持内联特性，除非你显式干预：
- 加
display: block→ 宽度生效，但会独占一行，破坏横向排列意图 - 加
display: inline-block→ 最常用解法：保同行、认width、支持margin/padding - 加
flex: 0 0 200px→ 更彻底：跳过flex-shrink压缩逻辑，锁定基础尺寸
Flex子项的width被“覆盖”，其实是flex-shrink在起作用
即使你给span加了display: inline-block并设了width，在Flex容器中仍可能被压窄——因为它的默认flex值是0 1 auto，其中flex-shrink: 1允许它在空间不足时主动收缩。
这不是bug，是Flex的弹性设计；但对固定尺寸内容（如按钮、图标、短标签）就是灾难：
-
flex-shrink: 0必须显式声明，否则width只是参考值 - 只写
flex-shrink: 0可能不够：某些浏览器会保留min-width: auto限制，得补上min-width: 0 - 推荐组合：
flex: 0 0 200px，三值锁死，不依赖width属性本身
align-items: stretch没让span撑满高度？先检查父容器有没有高度
想让span在Flex容器里填满高度（比如和旁边div对齐），写了align-items: stretch却无效，大概率是父容器高度为auto——stretch需要明确的交叉轴空间才能拉伸。
常见卡点：
-
html和body没设height: 100%，导致height: 100vh在子级失效 - 父容器是普通
div，没写任何height/min-height，计算结果就是auto - 用了
flex-direction: column，此时align-items控制的是宽度，不是高度
真正要填高，得让父容器有明确高度（如min-height: 100vh），再配合子项flex: 1或align-self: stretch。
嵌套Flex里span高度塌陷，常因祖先节点min-height:auto拦截拉伸
当span放在多层Flex嵌套中（比如Grid单元格 → Flex容器 → span），容易出现高度塌陷：明明父Flex设了align-items: stretch，span还是贴顶、不占满。
根源在中间层Flex容器的默认min-height: auto——它会阻止拉伸行为向下传递。解决方法很具体：
- 给中间层Flex容器加
min-height: 0（不是height: 0） - 或者加
height: 100%，前提是它的父级有确定高度 - 避免在中间层写
align-items: flex-start之类覆盖默认stretch
这个点极容易被忽略，调试时建议从最外层容器开始逐级检查height和min-height计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
