align-items用于父容器统一设置子元素在交叉轴的对齐方式，如center居中、flex-start顶部对齐；align-self作用于单个子元素，可覆盖父级设定，实现特殊对齐。例如.card-container设置align-items: center使所有子项居中，而.highlight .title使用align-self: flex-start让标题单独上移，形成视觉区分。两者结合可灵活控制布局对齐，提升页面设计自由度。
在使用CSS Flex布局时，子元素的对齐控制是实现灵活、响应式页面的关键。通过 align-items 和 align-self 属性，可以精确控制交叉轴（cross axis）上的对齐方式。下面结合实际场景，讲解这两个属性的用法与区别。
align-items：统一控制所有子元素的对齐方式
align-items 设置在父容器上，用于定义所有子元素在交叉轴上的默认对齐方式。常见的取值包括：
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- baseline：基线对齐
- stretch：拉伸填满容器（默认值）
例如，让所有子项在容器中垂直居中：
.container {display: flex;
align-items: center;
}
align-self：单独调整某个子元素的对齐方式
align-self 设置在子元素上，可以覆盖 align-items 的设定，实现个别子项的特殊对齐。它的可选值与 align-items 完全相同。
立即学习“前端免费学习笔记（深入）”；
比如，大多数子项居中，但其中一个需要靠顶部对齐：
align-self: flex-start;
}
此时即使父容器设置了 align-items: center，该子项仍会顶部对齐。
实战示例：卡片布局中的内容错位对齐
设想一个卡片列表，每张卡片高度一致，但其中一张需要突出显示，其标题靠上，其余内容保持居中。
.card-container {display: flex;
height: 200px;
align-items: center;
}
.highlight .title {
align-self: flex-start;
}
这样，只有高亮卡片的标题会上移，其他子元素仍居中显示，实现视觉层次区分。
基本上就这些。掌握 align-items 和 align-self 的配合使用，能让你在Flex布局中游刃有余地处理各种对齐需求。不复杂但容易忽略细节，多实践就能熟练。
