flex子项width: 50%不生效，主因是父容器默认flex-shrink: 1导致压缩，应设flex-shrink: 0或用flex: 0 0 50%；同时需确认父容器display: flex、宽度是否受限、子项min-width及white-space等干扰因素。
Flex子项width: 50%不生效，先看父容器有没有flex-shrink: 1
Flex子项设了width: 50%却撑不满一半，大概率是父容器默认开启了收缩——flex-shrink: 1在起作用。它会让子项无视你写的width，优先按剩余空间压缩尺寸。
实操建议：
- 给子项显式加
flex-shrink: 0，关掉自动压缩 - 或者用
flex: 0 0 50%（即flex-grow: 0flex-shrink: 0flex-basis: 50%），更稳妥 - 别只改
width，Flex布局里width只是初始参考值，真正起效的是flex-basis
父容器没设display: flex或用了inline-flex？检查渲染模式
如果父元素只是写了display: inline-flex，而它的内容宽度本身受限（比如被包裹在窄div里），子项的百分比会按那个窄容器算，不是按视口或预期父宽。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 子项
width: 50%看起来“太小”，实际是父容器本身宽度只有200px，50%就100px - 父容器是
inline-flex但没设width，又没内容撑开，结果宽度为0 - 父容器被其他CSS（如
max-width、padding）悄悄限制了可用宽度
用浏览器开发者工具选中父容器，看Computed里的width和display是否符合预期。
子项有min-width或box-sizing干扰？查继承和默认行为
min-width: auto（Flex子项默认值）会阻止width低于内容自然宽度；box-sizing: border-box影响的是内边距和边框是否计入宽度，但不会让百分比“消失”——它只是让计算更难猜。
容易踩的坑：
- 子项里有长单词或未折行文本（如URL），触发
min-width兜底，撑开子项导致百分比失效 - 父容器
flex-direction: column时，width是横轴尺寸，但百分比按父容器宽度算——如果父宽没定死，结果就飘 - 用了
white-space: nowrap又没配overflow: hidden，内容溢出也会破坏布局感知
用flex-basis替代width，但注意IE和旧Safari兼容性
在现代浏览器里，flex-basis: 50%比width: 50%更可靠，因为它直接参与Flex计算主轴尺寸。但IE10/11对flex-basis百分比支持不一致，旧版Safari（
如果必须兼容老环境：
- 用
flex: 1配合固定数量子项（如两个子项都写flex: 1，自动均分） - 避免混合使用
width和flex，尤其不要在同一个子项上同时设width和flex-basis - 真要测百分比，用
calc()兜底：flex-basis: calc(50% - 4px)（减去间隙）比纯百分比更可控
Flex百分比宽度不是“设了就有效”，它活在父宽、收缩规则、内容尺寸、盒模型四重约束里。漏掉任意一环，浏览器就按自己的逻辑 fallback，而不是报错提醒你。
