width: 100% + padding 溢出是因默认 box-sizing: content-box，width 仅指内容区，padding 额外叠加；修复须用 box-sizing: border-box 或改用 flex: 1 分配宽度。
子项设 width: 100% 后 padding 导致溢出
直接给 flex 子项写 width: 100% + padding: 12px，它会超出父容器——因为默认 box-sizing: content-box，width 只算内容区，padding 和 border 额外加进去。比如父宽 300px，子项 width: 100% 是 300px，再加左右各 12px 的内边距，实际占宽就变成 324px。
- 这是 flex 布局里最常被忽略的盒模型陷阱，尤其在卡片、表单控件、按钮组中高频出现
- 即使子项用了
flex: 1或flex: 0 1 auto，只要显式写了width: 100%，就立刻脱离 flex 分配逻辑，回归传统盒模型计算 - 解决方式不是删 padding，而是改盒模型：统一加
box-sizing: border-box
全局设置 box-sizing: border-box 是最简方案
在项目入口 CSS 或重置样式开头加一句：* { box-sizing: border-box; }。这样所有元素（包括 flex 子项）的 width 和 height 都包含 padding 和 border，padding: 12px 不再额外撑宽。
- 不用每个子项单独写
box-sizing: border-box，避免遗漏和维护成本 - IE8+ 全支持，无兼容性风险
- 注意：如果项目已存在部分组件依赖
content-box行为（极少见），需局部覆盖，但绝大多数现代 UI 库都默认启用border-box
flex 子项宽度应优先靠 flex 属性控制
硬写 width: 100% 往往是误用。flex 子项本就不该靠 width 填满，而应交由 flex 规则分配空间。例如想让两个子项均分父容器：
.container {
display: flex;
}
.item {
flex: 1; /* ✅ 自动均分，且 padding 不溢出 */
padding: 12px;
}
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，此时flex-basis: 0让浏览器从零开始按比例分配宽度，padding自然被包含在内 - 若需固定最小宽度（如响应式卡片），用
min-width: 250px+flex: 1，比width: 100%更健壮 - 表格类元素例外：
<table> 在 flex 容器中必须显式 <code>width: 100%+table-layout: fixed才能收敛列宽，此时更要确保box-sizing: border-box已生效gap 替代 padding 实现间距更安全
当目标是“子项之间留空”，而不是“子项自身内边距”，优先用
gap。它作用于 flex 项目间隙，完全绕过单个子项的盒模型计算。-
gap: 12px→ 行与行、项与项之间都留 12px -
gap: 0 16px→ 只设列间距（水平间隙），不影响上下 - 不干扰
justify-content或align-items，也不受子项width影响，语义清晰、行为稳定 - IE 不支持
gap，老项目可用margin模拟，但要注意首尾项多余外边距问题
真正麻烦的不是 padding 本身，而是把 width 和 padding 放在同一个盒模型逻辑里却没意识到它们的叠加关系。改
box-sizing是一劳永逸的起点，而放弃width: 100%、回归 flex 分配，才是长期可维护的写法。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
