align-items 设置容器内所有子项在交叉轴的对齐方式，align-self 允许单个子项覆盖该设置；后者优先级更高，实现个体独立对齐。
align-self
和
align-items
都是 CSS Flexbox 布局中用于控制元素在交叉轴（cross axis）上对齐方式的属性，但它们的作用范围和优先级不同。
align-items：容器级对齐设置
这个属性写在
flex 容器
上，用来统一设置所有子元素在交叉轴上的对齐方式。
常见取值包括：
flex-start
：顶部对齐（垂直方向起始位置）
flex-end
：底部对齐
center
：居中对齐
stretch
：拉伸填满容器（默认值）
baseline
：基线对齐
设置了
align-items
后，所有子项都会遵循这个规则，除非个别子项有特别设置。
align-self：单个子项的独立对齐
这个属性写在
flex 子项
上，用于覆盖容器的
align-items
设置，只影响当前这个子元素。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
它的可选值和 align-items 基本一致：
flex-start
、
flex-end
、
center
、
stretch
、
baseline
当某个子项设置了
align-self
，它就会忽略容器的
align-items
规则，按自己的设定对齐。
两者关系与优先级
align-self
的优先级高于
align-items
。相当于容器设了一个“默认对齐”，而子项可以用
align-self
“自己决定”。
举个例子：
容器设置
—— 所有子项都
垂直居中
其中一个子项设置
—— 这个子项会靠上对齐，其他不变
基本上就这些。理解清楚谁管整体、谁管个体，就能正确使用这两个属性了。
align-items: center;align-self: flex-start;