flex子元素width被忽略的真正原因是flex容器默认启用伸缩行为，flex-basis:auto优先于width且flex-shrink:1允许压缩；解决方法是设flex:0 0 width或flex-shrink:0+flex-basis:width。
flex 子元素的 width 被忽略的真正原因
不是 CSS 写错了，而是 flex 容器默认启用了伸缩行为：只要子元素没显式设置 flex 相关属性，浏览器就会按 flex: 0 1 auto 处理——其中的 flex-shrink: 1 允许压缩，flex-basis: auto 会优先用内容宽度，直接覆盖你写的 width。
如何让 width 生效而不被 flex 干预
关键在切断 flex-shrink 和重置 flex-basis。有几种可靠方式：
- 写死
flex: 0 0，比如widthflex: 0 0 200px或flex: 0 0 30% - 单独设
flex-shrink: 0+flex-basis:（注意不能只写widthwidth） - 如果用百分比宽度，确保父容器有明确宽度（比如
width: 100%或固定值），否则flex-basis: 30%无参照
flex: 1 为什么一定会吞掉你的 width
flex: 1 是 flex: 1 1 0 的简写，第三个值 0 表示 flex-basis: 0，此时子元素完全放弃自身宽度，全部交由 flex 分配空间。哪怕你同时写了 width: 200px，也毫无作用。
常见误写：
立即学习“前端免费学习笔记（深入）”；
.item {
width: 200px;
flex: 1; /* 这行让上面的 width 彻底失效 */
}正确写法（如需固定宽 + 剩余空间自适应）：
.fixed {
flex: 0 0 200px;
}
.grow {
flex: 1;
}响应式场景下容易踩的坑
媒体查询中改 width 但没同步更新 flex-basis，会导致断点后宽度不生效。例如：
@media (max-width: 768px) {
.item {
width: 100%; /* 单独改 width 没用 */
}
}应改为：
@media (max-width: 768px) {
.item {
flex-basis: 100%;
}
}更稳妥的做法是全程用 flex-basis 替代 width 控制主轴尺寸，避免双轨逻辑冲突。
flex 布局里，width 和 height 只在非主轴方向稳定；主轴方向必须靠 flex-basis 或 flex 缩写控制，这点很容易被忽略。
