Flex作用域仅限直接子元素，需为每层需控制的容器显式设置display: flex；嵌套时align-items/align-self不穿透，中间非Flex容器会中断对齐链路。
为什么给父容器设了 display: flex，子容器内部还是不居中？
因为 Flex 的作用域只限于**直接子元素**。父容器设了 display: flex，只是让它的第一层子元素成为弹性项；这些子元素内部的结构（比如按钮、文字、嵌套 div）仍按普通文档流渲染，不会自动继承 Flex 上下文。
常见错误现象：justify-content: center 写在卡片父容器上，但卡片里一个 <div><p>文字</p></div> 里的文字还是靠左——问题不在文字，而在中间那个 <div> 没有自己开启 Flex。
- 必须对每一层需要 Flex 控制的容器显式写
display: flex - 如果某层是
inline元素（如span），得用display: inline-flex或先转成block - IE11 对嵌套 Flex 支持弱，建议加
display: -ms-flexbox或兜底height: 100%
如何让卡片内的按钮始终贴底，且按钮之间水平居中？
关键不是“按钮怎么调”，而是“哪一层该设什么 Flex 属性”。按钮要贴底，前提是卡片本身是垂直方向的 Flex 容器；按钮要水平居中，又要求按钮所在区域自身是 Flex 容器。
- 卡片父容器必须设
display: flex+flex-direction: column（否则margin-top: auto或align-self: flex-end都无效） - 按钮必须是卡片的**直接子元素**；若套了多层
<div>，margin-top: auto要加在最外层那个包裹容器上 - 按钮区域（如
.card-footer）需单独设display: flex+justify-content: center（或space-between）来控制按钮间距 - 避免在按钮上直接写
margin，它会干扰margin-top: auto的计算逻辑
align-items 和 align-self 在嵌套时为什么经常失效？
align-items 只影响当前 Flex 容器的**直接子项**在交叉轴上的对齐方式，它不会穿透到子项内部；align-self 也只对直系父容器生效，一旦中间夹了一层非 Flex 容器，链路就断了。
立即学习“前端免费学习笔记（深入）”；
- 例如：卡片设了
align-items: stretch，但里面一个<div class="body">没设display: flex，那.body里的文字就不会被拉伸填高 -
align-self: flex-end在flex-direction: row下是控制上下对齐（交叉轴是垂直方向），但前提是卡片有明确高度（height或min-height），否则只是贴着.body自身底边，而非整个卡片视觉底部 - 检查
box-sizing是否统一为border-box，否则内边距/边框会挤占实际可用高度，导致按钮看起来偏高
响应式下卡片高度不一致，底部对齐错位怎么办？
这不是按钮的问题，而是外层网格或 Flex 容器没处理好“等高”逻辑。嵌套 Flex 本身不解决跨卡片的高度同步。
- 如果卡片放在
display: grid容器中，用grid-template-rows: 1fr或align-items: stretch强制等高 - 如果卡片是
display: flex的子项，确保父容器设了align-items: stretch且卡片没有设置固定height（否则会覆盖拉伸行为） - 动态内容导致高度浮动时，慎用
height: 100%，优先用min-height+flex: 1组合，让主体区域自动撑开
嵌套 Flex 的核心是“每层自治”：没有隐式继承，也没有全局上下文。写错一层，下面全乱。最容易被忽略的，就是忘记给中间那层包裹容器加 display: flex。
