align-items作用在display: flex或display: grid的父容器上，控制子元素在交叉轴上的对齐方式；justify-content同理作用于父容器，控制子元素在主轴上的分布。
align-items 作用在哪个容器上
align-items 只对设置了 display: flex 或 display: grid 的父容器生效，它控制的是**子元素在交叉轴（cross axis）上的对齐方式**。比如 flex-direction: row 时，交叉轴是垂直方向，align-items 就管上下对齐；换成 column，交叉轴变成水平方向，它就管左右对齐。
常见错误是直接给子元素加 align-items —— 它不是子元素的属性，加了也没用。
-
align-items: flex-start：子元素贴交叉轴起点对齐（如row下就是顶部） -
align-items: center：居中（最常用） -
align-items: stretch：默认值，子元素拉伸填满容器交叉轴尺寸（除非子元素本身设了固定高度/宽度） -
align-items: baseline：按第一行文字基线对齐，适合文字+图标混合排版
justify-content 控制主轴对齐，但主轴方向由 flex-direction 决定
justify-content 同样只在 display: flex 容器上有效，它影响的是**子元素在主轴（main axis）上的分布方式**。关键点在于：主轴方向不是固定的，它取决于 flex-direction 的值。
比如：flex-direction: row（默认）→ 主轴水平 → justify-content 控制左右分布；flex-direction: column → 主轴垂直 → 它就控制上下分布。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: flex-start：子元素堆在主轴起点（左或上） -
justify-content: space-between：首尾子元素贴住两端，中间等距分配空白 -
justify-content: space-evenly：所有间隙（包括首尾外侧）相等，比space-around更均匀 - 注意：
justify-content对单个子元素无效（没“分布”可言），此时用margin: auto更直接
align-items 和 justify-content 同时用时的典型组合
两者配合能快速实现各种居中场景，但必须确保父容器是 Flex 容器且尺寸明确（尤其垂直居中需要父容器有高度）。
例如让一个按钮在页面中完全居中：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* 必须设高度，否则 align-items:center 没效果 */
}
- 如果父容器高度靠内容撑开，
align-items: center看起来“没反应”，大概率是高度不足 -
justify-content: center+align-items: center是最常用的居中组合，但别忘了检查父容器是否设置了height或min-height - Grid 布局中也能用这两个属性，但 Grid 还有更精细的对齐控制（如
justify-self、align-self），优先级更高
容易被忽略的兼容性和 fallback 问题
align-items 和 justify-content 在现代浏览器支持良好，但 IE10–IE11 对部分值支持不全（如 space-evenly 完全不支持，stretch 行为异常）。
- 如果需兼容 IE，避免用
space-evenly，改用space-around或 JS 计算 margin -
align-items: baseline在不同字体、行高下表现不一致，慎用于精确对齐需求 - Flex 容器内子元素若设了
vertical-align，会被忽略——这个属性只对 inline/inline-block 元素有效 - 移动端 Safari 旧版本对
align-items: stretch在某些嵌套场景下有渲染 bug，可显式设子元素align-self: stretch强制
实际写的时候，先确认父容器是 Flex，再看主轴方向，最后选对属性和值。对齐失效，八成是容器没高度、没设 display，或者把属性加错地方了。
