使用align-items对齐多个Flex子元素时单个元素不生效问题咨询

问题核心原因 #

这个现象是Flex主轴、交叉轴的对应规则，以及align-items的作用范围共同导致的：

• 你的.con容器设置了flex-direction: column，此时Flex主轴为垂直方向，交叉轴为水平方向，align-items: flex-end作用于交叉轴，只会控制子元素在水平方向靠右对齐，而非垂直方向靠下。
• align-items只会作用于Flex容器的直接子元素，不会向下继承控制子元素内部的内容。.con的直接子元素只有两个：<article>标签和.div2标签，<h2>是<article>的内部元素，不受外层.con的align-items规则影响。

两个子元素表现差异的原因 #

• .div2没有设置固定宽度，宽度由内部图标内容撑开，所以align-items: flex-end让它在水平方向靠右对齐时，视觉上会明显看到整个区块靠到右侧，也就是你以为的"生效"表现。
• <article>是默认块级元素，宽度和父容器.con完全一致，align-items: flex-end让它靠右对齐时，因为本身宽度和父容器相同，视觉上看不出任何位移。同时<article>内部的<h2>、<p>默认是左对齐，所以你会觉得<h2>没有遵循对齐规则。

如果需要让<h2>也靠右显示，给<article>添加text-align: right规则即可验证。

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