display: flex 后子元素尺寸计算逻辑被 flex 引擎接管，width/height:auto 含义改变，浮动和 vertical-align 失效，父容器默认不撑高，需显式设高或用 flex 属性控制拉伸与收缩。
display: flex 后子元素的盒模型行为确实变了
是的，会变——不是盒模型本身（box-sizing、padding、border 等仍生效），而是子元素的**尺寸计算逻辑和默认行为被 flex 引擎接管了**。最典型表现：浮动失效、vertical-align 失效、width: auto 和 height: auto 的含义彻底不同。
flex item 默认不再“撑开”父容器高度
块级元素在普通流中，若子元素有高度，父容器会自动包裹；但设为 display: flex 后，父容器默认不根据子项内容撑高，除非你显式设置高度或让子项拉伸。
-
align-items: stretch（默认值）会让子项在交叉轴（默认是垂直方向）上拉满父容器高度——但前提是父容器本身有明确高度（比如height: 300px）或受外部约束 - 如果父容器高度为
auto且无其他限制，子项即使设了height: 100%也无效，因为“100%”无参照基准 - 常见翻车现场：
div.flex-container > div.item { height: 200px; }没问题；但删掉这行后，item 高度退化为内容高度，父容器也不再撑高
width/height:auto 在 flex 中的含义被重定义
普通流中 width: auto 表示“尽可能占满可用宽度”，而 flex item 的 width: auto 是“按内容宽度 + flex-basis 计算初始主轴尺寸”，后续还受 flex-grow/flex-shrink 影响。
- 没设
flex相关属性时，width: auto的 flex item 会按内容宽度渲染，**不会自动占满父容器主轴空间**（对比 block 元素） - 想让一个 item 填满剩余空间？得写
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 想让 item 固定宽度、不伸缩？推荐显式写
flex: 0 0 auto或flex: none，避免意外收缩（尤其当父容器空间不足时）
边框、内边距仍影响尺寸，但 box-sizing 很关键
flex item 的 padding 和 border 默认仍会撑大它的主轴/交叉轴尺寸（即走标准盒模型）。如果你希望 width: 200px 就是“内容+padding+border=200px”，必须加 box-sizing: border-box。
立即学习“前端免费学习笔记（深入）”；
- 没加
box-sizing: border-box时：width: 200px; padding: 10px;→ 实际占用主轴空间是 220px - 加了之后：同上声明，实际占用仍是 200px，padding 和 border 向内压缩内容区
- 建议全局重置：
* { box-sizing: border-box; }—— 这不是 flex 特有，但对 flex 布局体验提升极大
flex 布局下真正容易被忽略的，是「尺寸决策权从文档流移交给了 flex 引擎」：你写的 width 只是起点，flex 属性才是最终裁判。不显式控制 flex-basis、flex-grow、flex-shrink，就等于把尺寸交给默认规则——而默认规则在不同浏览器、不同 flex-direction 下表现一致，但和传统布局直觉相悖。
