子元素的 box-sizing 必须设为 border-box，否则 padding 和 border 会额外撑大尺寸，破坏 flex 分配逻辑；默认 content-box 下 width 仅指内容区，导致总宽超预期，引发换行、溢出等问题。
子元素的 box-sizing 必须设为 border-box，否则 padding 和 border 会额外撑大尺寸，破坏 flex 分配逻辑。
为什么 content-box 在 Flex 中容易出问题
Flex 子元素默认使用 box-sizing: content-box，此时你写的 width: 200px 只管内容区域，padding: 12px 和 border: 2px 还要额外加进去，总宽变成 228px。在等分布局（如 flex: 1）下，这个“意外增量”会导致换行、溢出或对不齐。
常见错误现象：
- 明明写了
flex: 1，但两个子项并排后突然换行 - 设置了
width: 100%的子项超出父容器右边界 - 用
flex-basis: 200px后实际宽度远大于 200px
box-sizing: border-box 是必须的全局基础
它让 width 和 height 包含 content + padding + border，尺寸可预期。这不是“可选项”，而是 Flex 布局能稳定工作的前提。
实操建议：
- 在样式表最开头加上：
*, *::before, *::after { box-sizing: border-box; } - 不要只给 flex 子项单独设，否则子项里的子元素（比如按钮、输入框）仍可能用
content-box撑开 - 若项目已有历史样式冲突，至少确保所有 flex 容器内的直系子元素显式声明
box-sizing: border-box
flex-basis 和 width 在 border-box 下的行为差异
flex-basis 是 flex 分配空间的“基准值”，它受 box-sizing 影响；而 width 是普通盒模型属性，仅在非弹性场景下主导尺寸。混用时极易混乱。
使用场景与要点：
- 想让子项“初始占 200px，再按需伸缩”，用
flex-basis: 200px（配合flex-grow: 1） - 想完全禁用伸缩、强制固定宽度，用
flex: 0 0 200px，比单独写width: 200px更可靠 - 避免同时写
width: 200px和flex-basis: 200px—— 浏览器会以flex-basis为准，width被忽略，但代码语义矛盾 -
flex-basis: auto会先看width值，再 fallback 到内容尺寸；所以设了width又没设flex-basis，其实等于flex-basis: width
margin 不参与 flex 计算但影响对齐和间距
margin 在 Flex 布局中不会被 flex-grow/shrink 调整，但它实实在在占据空间，并改变子项之间的视觉距离，甚至干扰 align-items 的对齐效果。
容易踩的坑：
- 给子项设
margin: 10px后，左右 margin 加起来吃掉 20px，导致flex: 1分到的空间变小 - 用
margin: auto实现居中时，若子项有固定高度，margin-top: auto可能被align-items: stretch抵消 - 横向 flex 容器中，
margin-right大于剩余空间时，最后一个子项会被挤到下一行（即使flex-wrap: nowrap） - 推荐用
gap替代margin控制子项间距 —— 它不占用子项自身空间，也不触发重排
真正麻烦的不是 flex 属性本身，而是盒模型和 flex 的叠加效应：一个没设 box-sizing 的 padding，就能让整行布局崩掉。别跳过这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
