flex项目width/height“不生效”实为flex-basis优先级高于width，当flex-basis非auto（如flex:1→flex-basis:0%）时浏览器直接忽略width；仅flex-basis:auto时width才作fallback。
Flexbox 本身不绕过盒模型，但能让你几乎不用手动算 padding、border 和 margin 对布局的干扰——前提是正确设置 box-sizing 并理解 Flex 项目尺寸计算的优先级。
为什么 flex 项目 width/height 经常“不生效”
根本原因不是 Flex 本身有问题，而是你写的 width 被 flex-basis 或默认的 auto 覆盖了。Flex 项目在主轴上的尺寸由 flex-basis（而非 width）主导；只有当 flex-basis: auto 且没设 width 时，才退回到 content 尺寸。
-
flex-basis: 200px会直接覆盖width: 100px，哪怕后者写在后面 - 设
flex: 1相当于flex: 1 1 0，此时flex-basis是0，width完全无效 - 想让
width生效？显式写flex-basis: auto，或用flex: 0 0 auto
align-items: stretch 导致图片/按钮被拉变形
这是最典型的“盒模型 + Flex”双重陷阱：align-items: stretch（默认值）会让项目在交叉轴上拉满容器高度，但图片、button 等替换元素有固有宽高比，强行拉伸就失真。
- 修复方式不是删
align-items，而是给项目加align-self: flex-start或align-self: center - 更稳妥的做法：对图片统一加
height: auto; max-width: 100%，再配合object-fit: cover控制裁剪 - 注意：如果父容器没设
height，stretch实际不会拉伸——它只在交叉轴尺寸明确时才起作用
flex: 1 和 flex: auto 的行为差异
这两个值看起来都“自动占满”，但底层逻辑完全不同，直接影响是否尊重内容尺寸和能否收缩。
-
flex: 1展开为flex: 1 1 0：初始大小是0，所以会无视子元素自身width，强行均分剩余空间 -
flex: auto展开为flex: 1 1 auto：初始大小取width或内容自然宽度，之后才按比例拉伸或收缩 - 常见翻车场景：导航栏里几个
li设了flex: 1，结果文字被压缩到看不见——换成flex: auto就保留文字宽度，只在空间富余时扩展
为什么加了 display: flex 后 margin-top 还塌陷
这不是 Flex 的 bug，而是文档流规则依然存在：Flex 容器仍是块级元素，它的子项目脱离文档流，但容器自身的外边距仍遵循普通块盒规则。所谓“margin 塌陷”只发生在**相邻块级兄弟元素之间**，而 Flex 项目不是块级兄弟，它们是 Flex 项目——所以塌陷本就不该发生。
真正的问题往往是：你误以为给子项目设了 margin-top 就能顶开父容器，但 align-items: stretch 让项目贴着容器顶部，margin-top 在交叉轴方向被忽略（除非你改用 align-items: flex-start）。要推远容器，应该给容器本身加 margin，或给第一个子项目加 margin-block-start。
复杂点在于：Flex 项目虽然不参与文档流，但它内部的内容（比如文字、图片）仍受盒模型影响；box-sizing: border-box 必须全局启用，否则 padding 和 border 会悄悄撑大项目，破坏你预设的 flex-basis 或 width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
