align-self 属性用于控制 flex 容器中单个项目在交叉轴上的对齐方式。这个属性只对 flex 容器中的 flex 项目有效。
语法
----- -
----------- ---- - ---------- - -------- - ------ - -------- - --------
-auto：默认值，继承自父元素的align-items属性。flex-start：项目在交叉轴的起始位置对齐。flex-end：项目在交叉轴的末尾位置对齐。center：项目在交叉轴的中心位置对齐。baseline：项目以基线对齐。stretch：项目被拉伸以适应容器。
示例
---------- -
-------- -----
------------ -------
-
------ -
----------- -----------
-
------ -
----------- -------
-
------ -
----------- ---------
-以上示例中，.container 是一个 flex 容器，设置了 align-items: center;，表示项目在交叉轴上居中对齐。而 .item1、.item2、.item3 分别设置了不同的 align-self 值，使它们分别在交叉轴的起始、中心、末尾位置对齐。
注意事项
align-self属性会覆盖align-items属性在单个项目上的设置。- 如果项目的父元素不是 flex 容器，则
align-self属性不会生效。 align-self属性只对 flex 项目有效，非 flex 项目不受影响。