Flex项目高度不一致源于align-items默认stretch且内容高度不同，解决需统一min-height并区分align-items（项级对齐）与align-content（行级对齐）。
Flex项目高度不一致导致行内元素上下错位，本质是多行flex容器中各行默认按 align-content: stretch 拉伸（但仅当有多行且容器有剩余高度时才生效），而单行或未设高度时，实际起作用的是每项的 align-items（默认 stretch）——此时若子项内容高度不同、又没设高度或 min-height，就会出现“参差不齐”。解决方向有两个：一是让每项基础尺寸可控（靠 flex-basis + min-height），二是统一各行对齐方式（靠 align-content 或改用 flex-wrap: wrap 配合 align-items）。
统一项目最小高度，避免内容撑开差异
高度不一致常源于文字行数、图片尺寸或内边距不同。最稳妥的做法是给所有 flex 项目设置一致的 min-height，再配合 flex-basis 控制初始宽度/高度基准。
- 对 column 方向：设
flex-basis: auto+min-height: 120px（根据设计稿定值） - 对 row 方向（更常见）：设
flex-basis: 200px（控制宽度）+min-height: 100px（兜底高度） - 避免只写
height: 100px，否则内容超出会溢出或被裁剪；min-height更安全
多行布局下用 align-content 统一各行对齐方式
当 flex-wrap: wrap 生效且容器高度富余时，align-content 才会起作用。它控制的是“行与行之间”的分布，不是单个子项。
-
align-content: stretch（默认）→ 各行填满容器高度，但可能拉伸不均 -
align-content: flex-start→ 所有行顶部对齐，留空在底部（最常用，视觉整齐） -
align-content: center→ 行组整体居中，适合卡片网格等场景 - 注意：
align-content对单行无效，此时应调align-items
对齐粒度更细：用 align-items + padding/margin 微调
如果只是个别项目基线不齐（比如文字+图标混排），align-items 比 align-content 更直接：
立即学习“前端免费学习笔记（深入）”；
-
align-items: flex-start→ 所有子项顶部对齐（推荐用于标题+描述类卡片） -
align-items: center→ 垂直居中（适合按钮、图标+文字组合） - 搭配
padding-top或margin-top: auto可实现底部对齐等特殊效果
基本上就这些。关键不在堆属性，而在分清 align-items（项级）、align-content（行级）、min-height（内容兜底）各自管什么。试两轮，基本就稳了。
