Flexbox中align-self与margin:auto的关系：为何auto边距会忽略align-self？

先明确这条规则：

当Flexbox项目的交叉轴边距设为auto时，align-self属性会被忽略。

实际含义 #

简单来说：如果Flex项目在交叉轴方向（比如flex-direction: row时的垂直方向，flex-direction: column时的水平方向）设置了margin-top: auto/margin-bottom: auto（或水平方向的margin-left: auto/margin-right: auto），那么该项目的align-self属性会完全失效，项目在交叉轴上的位置由auto margin控制。

示例对比 #

示例1：未设置交叉轴auto margin，align-self生效

补全初始代码（需给容器添加display: flex和高度，才能展示交叉轴对齐效果）：

<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

section {
  display: flex;
  height: 200px; /* 容器设高度，让交叉轴有足够空间 */
  border: 1px solid #333;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end; /* 该属性生效，项目对齐容器底部 */
  background: pink;
}

此时粉色的Item #3会对齐容器底部，align-self: flex-end正常发挥作用。

示例2：设置交叉轴auto margin，align-self被忽略

修改Item #3的CSS，添加交叉轴方向的auto margin：

div:nth-child(3) {
  align-self: flex-end; /* 该属性被忽略，不再生效 */
  background: pink;
  margin-top: auto; /* 交叉轴方向的auto margin */
}

此时粉色项目依然在容器底部，但这是margin-top: auto的作用——浏览器会把容器顶部到项目顶部的剩余空间全部分配给margin-top，将项目推到底部。哪怕把align-self改成flex-start或center，项目位置都不会变化，因为align-self已被auto margin覆盖。

进阶验证：同时设置上下auto margin

如果给项目同时设置margin-top: auto和margin-bottom: auto：

div:nth-child(3) {
  align-self: flex-end; /* 依然被忽略 */
  background: pink;
  margin-top: auto;
  margin-bottom: auto;
}

项目会在交叉轴上居中，这是auto margin分配剩余空间的结果，和align-self: center效果一致，但此时align-self完全没起作用。

内容的提问来源于stack exchange，提问作者user19551894