加了flex但布局没反应，根本原因是容器缺乏可测量的尺寸基准；flex仅激活弹性行为，不提供尺寸，需显式设置高度（如h-screen、min-h-screen）或确保父级传递高度，嵌套时还需min-h-0解除默认最小高度限制。
加了 flex 但布局没反应，大概率是缺了高度上下文或方向控制——Flexbox 行为完全依赖容器是否“可测量”，不是类名堆得多就能生效。
为什么 flex 加了却没效果？
根本原因不是类名写错，而是容器本身没有尺寸基准：
-
flex只激活弹性行为，不提供尺寸；若父容器高度由内容撑开（比如普通div），items-center、flex-1全部失效 - 常见漏项：
h-screen、min-h-screen、h-96等显式高度类没加 - 嵌套 flex 容器时，深层子容器若没设
min-h-0，flex-1会因继承父级高度而“溢出”导致拉伸失败
justify- 和 items- 到底控制哪根轴？
它们的作用轴随 flex-row / flex-col 动态切换，不是固定“水平/垂直”：
-
flex-row（默认）：主轴水平 →justify-center水平居中，items-center垂直居中 -
flex-col：主轴垂直 →justify-center垂直居中，items-center水平居中 -
justify-items-center是 Grid 类，在 Flex 容器里写了也无效
侧边栏 + 主内容等高布局怎么写才稳？
靠 items-stretch 不够，关键在让主区域“有高度可分配”：
- 外层用
flex flex-col min-h-screen - header/footer 用
h-16 flex-shrink-0固定高度 - 中间区域加
flex-1 flex（此时它才具备明确交叉轴尺寸） - 该区域内的
aside和main自然等高，无需额外items-stretch
真正卡住人的从来不是类名记不住，而是忘了所有 Flex 行为都悬在「高度可测量」这根线上——没 h-screen、没上级 flex-1、没 min-h-，再多个 justify/items 类也托不起内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
