flex子项默认等高，因align-items: stretch为容器默认值，子项未设height/min-height或align-self时自动拉伸填满交叉轴；父容器需display: flex且有明确高度来源（如min-height: 100vh），侧边栏用flex: 0 0 240px、主内容用flex: 1最稳妥。
直接加 flex 就能启用 Flexbox，但多数人布局错乱，是因为没理解容器方向、对齐基准和子项伸缩行为这三层控制逻辑。
为什么加了 flex 但元素没按预期排列？
Flex 容器默认是 flex-row（水平排列）+ justify-start（左对齐）+ items-stretch（等高拉伸），但这些行为全依赖父容器有明确尺寸上下文。
- 外层没设
h-screen、min-h-screen或显式高度 →items-center/items-stretch失效，因为交叉轴无参照 - 子项写了
h-12、max-h-40或self-start→ 主动覆盖items-stretch，导致“不等高” - 误用
flex-col后还加items-stretch→ 此时拉伸的是宽度（交叉轴已变成水平方向），不是高度 - 父容器本身是普通
div且未参与更高层 flex/grid 布局 → 它的高度由内容撑开，无法分配剩余空间
justify- 和 items- 到底控制哪根轴？
主轴（main axis）由 flex-row / flex-col 决定；交叉轴（cross axis）自动垂直于它。类名语义不变，但作用对象随方向切换。
-
flex-row（默认）：主轴水平 →justify-center水平居中，items-center垂直居中 -
flex-col：主轴垂直 →justify-center垂直居中，items-center水平居中 - 别混淆
justify-items-center：这是 Grid 类，Flex 容器里写了也无效 - 想让子项在交叉轴“不拉伸”，改用
items-start或self-start，而不是删掉flex
怎么让侧边栏和主内容真正等高？
单纯在外层加 flex 不够——必须让主内容区“占满剩余高度”，才能提供拉伸基准。
- 外层容器设
flex flex-col min-h-screen - 顶部/底部固定区域（如
header、footer）用固定高度或h-16等 - 中间区域加
flex-1 flex，此时它才具备可测量的交叉轴尺寸 - 该区域内的两栏（如
aside+main）自然等高，无需额外items-stretch - 避免嵌套多层
flex却不重置min-h-0：深层容器若没高度来源，flex-1会失效
最容易被忽略的点：所有 Flex 行为都依赖「高度可测量」。没 h-screen、没 flex-1 上级容器、没显式 min-h-，再多个 justify/items 类也托不起内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
