Flex子项拉伸靠align-items: stretch（默认值）而非justify-content；需父容器设置明确高度（如height或min-height），子项自身不能设固定宽高；单个子项拉伸用align-self: stretch；Grid更适二维等高布局。
flex子项不居中只拉伸：检查 justify-content 和 align-items 的分工
Flex布局里“拉伸”靠的是交叉轴上的默认行为，不是靠居中属性。很多人一上来就调 justify-content: center，结果发现主轴内容被挤到中间，但子项高度/宽度没变——这不是拉伸，是错配了控制轴。
真正触发子项在交叉轴上拉伸的，是 align-items: stretch（默认值），前提是子项自身没设固定宽高（如 height、width、min-height 等）。
-
justify-content只管主轴（比如flex-direction: row时的水平方向），和“拉伸”无关 -
align-items: stretch才让子项在交叉轴（此时是垂直方向）填满容器高度 - 如果父容器没设高度（比如
height: auto），子项再 stretch 也没可拉的空间——必须给父容器明确的高度或最小高度
子项高度不随父容器撑开？确认父容器有可参考的交叉轴尺寸
Flex 的 stretch 行为依赖交叉轴上有确定尺寸。父容器若高度由内容撑开（height: auto），那子项 stretch 实际无效果——它只是“尽可能高”，而“尽可能”等于内容高度。
常见场景：卡片列表容器用了 display: flex; flex-direction: column;，想让每张卡片高度一致并占满区域，但卡片高度参差不齐。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
height: 100vh或min-height: 500px，提供明确的交叉轴约束 - 避免在子项上写
height: 100%——它依赖父元素有显式高度，且易和 flex stretch 冲突 - 如果用
flex: 1，它本质是flex-grow: 1+flex-shrink: 1+flex-basis: auto，只在剩余空间分配时生效，不等价于 stretch
用 align-self: stretch 单独控制某个子项
当只需要某一个子项拉伸，其余保持内容高度时，不要动全局 align-items，改用单个子项的 align-self。
注意：align-self 会覆盖 align-items，但它只对有明确交叉轴尺寸的父容器生效。
- 父容器需有明确高度（如
height: 400px） - 目标子项设
align-self: stretch，其他子项保持默认或设align-self: flex-start - 如果该子项内部有
margin或padding，拉伸后可能溢出，建议配合box-sizing: border-box
`.container { display: flex; flex-direction: column; height: 300px; }
.item-a { align-self: stretch; }
.item-b { align-self: flex-start; }`
Grid 比 Flex 更适合“网格内统一拉伸”场景
如果目标是多行多列的子项目全部等高/等宽拉伸（比如仪表盘卡片、响应式网格），Flex 的一维特性会让代码绕弯，容易陷入嵌套或 JS 补位。
Grid 天然支持二维拉伸，用 grid-template-rows: 1fr 1fr 或 grid-auto-rows: 1fr 就能直接定义行高比例，且子项默认 stretch。
- 避免用
display: flex做两维布局，尤其是需要行列对齐+等高时 -
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))配合grid-auto-rows: 1fr，可实现响应式等高卡片流 - 注意 Grid 中
align-items: stretch同样生效，但它的“交叉轴”是行方向（grid-template-rows定义的方向）
min-height 或 height。 
