align-items 作用于每个 flex item，在交叉轴上独立对齐，多行时仍生效；align-content 仅在多行时控制行组整体在交叉轴上的分布，二者分工明确、互不覆盖。
align-items 是单行子项的交叉轴对齐，不管几行都生效
它作用于每个 flex item，让每个子元素在交叉轴（cross axis）上独立对齐。即使容器设了 flex-wrap: wrap 且实际排成多行，align-items 仍对每一行里的每个子项分别起作用。
常见误判是以为“多行时它就失效了”——其实不是失效，而是效果被掩盖了：比如设 align-items: center，每行的子项都会在该行高度内垂直居中，但不同行之间没有整体偏移关系。
- 必须配合容器有明确的交叉轴尺寸才看得清效果（如
height固定，flex-direction: row） - 值为
stretch时，子项会拉伸填满整行高度（前提是子项没设固定高度） - 若子项本身设置了
align-self，会覆盖align-items的值
align-content 只在多行时生效，控制的是“行组”整体在交叉轴上的位置
align-content 完全不碰单个子项，它只在 flex-wrap: wrap 或 wrap-reverse 导致容器内出现**两行及以上**时才起作用。它的对齐对象是“所有行组成的整体”，也就是行与行之间的空白分配方式。
典型错误是给单行容器加 align-content: center 却看不到效果——因为此时只有一根轴线，该属性直接被忽略。
- 容器必须有明确的交叉轴尺寸（如
height），否则行组没有可分配的空间 -
align-content: stretch（默认）会让各行等比例拉伸填满容器高度，不是子项拉伸 -
space-between和space-around的间距逻辑不同：space-between首尾行贴边，中间均分；space-around每行上下各留一份间距
两者同时存在时，谁管什么、谁先起作用
它们不冲突，也不覆盖，而是分工明确：
-
align-items决定“每行内部，子项怎么摆” -
align-content决定“所有行作为一个块，整体在容器里怎么摆” - 如果容器高度远大于所有子项总高度，
align-content分配行间空隙，align-items仍在每行内各自生效
例如：容器 height: 400px，三行子项总高仅 150px，设 align-content: space-between + align-items: flex-start，结果是三行上下贴边、中间均匀留空，且每行内所有子项都顶在该行顶部。
容易被忽略的关键前提条件
这两个属性都不是“设了就一定可见”。实际调试时卡住，八成是漏了下面这些硬性条件：
-
align-content要求：必须有flex-wrap: wrap（或wrap-reverse）+ 至少两行 + 容器交叉轴方向有**确定尺寸**（如height或max-height） -
align-items在flex-direction: column时，交叉轴变成水平方向，此时它影响的是子项的**水平对齐**（如center让子项水平居中），不是垂直 - 父容器没设
display: flex，或者子项被float/position: absolute脱离文档流，这两个属性都无效
真正难的不是记值，而是每次写之前，先确认当前是单行还是多行、交叉轴尺寸有没有、子项是否还在 flex 流内——这些比背语法重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
