Flexbox不改变子元素盒模型计算方式，box-sizing仍起决定性作用；flex项目默认仍为content-box，width仅指内容区，padding和border额外叠加，需显式设border-box才能使width包含二者。
Flexbox本身不改变子元素的盒模型计算方式，box-sizing 仍起决定性作用——这是最容易被忽略的前提。
flex项目默认仍走content-box，不是border-box
即使父容器设了 display: flex，每个子元素（flex item）依然按标准盒子模型解析 width 和 height，除非你显式设置 box-sizing: border-box。很多开发者以为“用了Flex就自动变border-box”，结果padding加border后内容被意外压缩或溢出。
- 没设
box-sizing时：width: 200px; padding: 10px; border: 2px solid→ 内容区只剩176px - 加了
box-sizing: border-box后：同样声明下，内容区自动缩为176px，总宽严格保持200px - 全局统一写法更安全：
* { box-sizing: border-box; }或更推荐的*::before, *::after { box-sizing: inherit; }
flex属性会覆盖width/height，但不绕过box-sizing逻辑
flex 简写（如 flex: 1、flex: 0 0 200px）本质是设置 flex-grow、flex-shrink 和 flex-basis。而 flex-basis 的值（比如 200px 或 auto）在参与主轴尺寸计算前，仍受 box-sizing 控制——它决定的是“这个基础尺寸到底包不包含padding和border”。
-
flex-basis: 200px+box-sizing: content-box→ 基础尺寸 = 内容区200px，加上padding/border后实际占位 >200px -
flex-basis: 200px+box-sizing: border-box→ 基础尺寸 = 总宽200px（含padding/border） - 用
flex-basis: auto时，浏览器取元素自身的width/height计算，此时box-sizing同样生效
align-items影响交叉轴尺寸，但不修改盒模型本身
align-items: stretch（默认值）会让子元素在交叉轴方向拉伸填满容器高度，但这只是布局行为，不改变其内部盒模型结构。如果子元素设置了 height 且 box-sizing: content-box，它的实际占用高度仍是 height + padding-top + padding-bottom + border-top + border-bottom —— 拉伸的是内容区，padding和border照常外扩。
- 想让拉伸后总高严格等于容器高？必须配
box-sizing: border-box，否则padding/border会撑出滚动条或溢出 -
align-items: flex-start或center下，子元素保持自身盒模型尺寸，不拉伸，此时box-sizing影响的是它“自己站多大地方”，而非“被拉多长” - 注意：
min-height/max-height限制的是内容区高度（在content-box下），不是总高
真正控制子元素盒模型的，从来不是Flex属性，而是 box-sizing + 尺寸声明的组合；Flex只决定这些尺寸如何在容器内分配与对齐。漏掉 box-sizing，再精准的 flex 配置也救不回错乱的视觉尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
