flex容器默认块级，无需width:100%；子项铺满应使用flex:1（即flex-grow:1、flex-shrink:1、flex-basis:0），避免width:100%导致布局异常。
flex容器本身不靠width 100%铺满父容器
很多人加了 display: flex 后还手动写 width: 100%，其实这是多余的。flex容器默认就是块级元素，会自动撑满父容器宽度（除非父容器有 padding 或其他限制）。强行加 width: 100% 不仅没用，还可能在某些嵌套场景下触发意外的盒模型计算问题。
真正决定“铺满”的是容器的 display 类型和父容器行为，不是 width 属性。flex 布局里，width 对容器本身几乎无意义，重点该放在子项的 flex 行为上。
子项水平铺满的关键是 flex: 1 或 flex-grow: 1
想让某个子元素占满剩余空间，别碰 width，直接用 flex 缩写或 flex-grow：
-
flex: 1=flex-grow: 1+flex-shrink: 1+flex-basis: 0，最常用也最安全 - 多个子项都设
flex: 1，它们会等分剩余空间 - 如果只想让某一个铺满，其他固定宽，就只给它设
flex: 1，其余用flex: 0 0 auto或明确 width
示例：
.container { display: flex; }
.item-main { flex: 1; }
.item-sidebar { width: 240px; }
width 100% 在 flex 子项里容易出错
在 flex 子项上写 width: 100% 是个高频错误，尤其当父容器是 flex 时：
- 它会让子项强行占满整个父容器宽度，无视其他兄弟元素，破坏 flex 排列逻辑
- 如果父容器有
gap，width: 100%还可能造成溢出或横向滚动 - 在 Safari 旧版本中，
width: 100%+flex组合曾引发渲染 bug，表现为内容截断或错位
正确做法：用 flex: 1 替代 width: 100%；若需兼容极老浏览器（IE10），才考虑 fallback 写法，但必须加注释说明。
flex-basis: 0 是铺满逻辑的隐含前提
flex: 1 能铺满，本质是因为 flex-basis: 0 让子项初始尺寸归零，再由 flex-grow 分配剩余空间。如果误设了 flex-basis: auto（比如只写 flex-grow: 1），子项会先按内容宽度占位，再伸展——结果往往不是“铺满”，而是“比内容宽一点”。
所以别拆开写：
❌ flex-grow: 1; flex-basis: auto;
✅ flex: 1; 或显式写 flex: 1 1 0;
这个 0 容易被忽略，但它才是“真正从零开始均分”的关键数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
