flex布局中设置align-self时如何让元素maxWidth属性正常生效

问题根因 #

当flex容器设置flex-direction: column时，默认align-items: stretch，子元素会自动拉伸到和容器同宽，因此max-width能正常生效。
当你修改对齐属性为align-self: center/父容器设置align-items: center后，子元素不再默认拉伸，宽度默认由内容撑开。你示例里的内层div没有设置宽度、无内容，因此宽度为0，看起来像max-width失效。

解决方案 #

两种常用方案都可以实现「对齐+max-width自适应」的需求：

方案1：搭配width: 100%使用

给设置了max-width的子元素加width: 100%，既保证元素优先占满可用父宽度，又受max-width限制上限，此时对齐属性可正常生效：

<div style="display: flex; flex-direction: column;">
    <div style="max-width: 500px; align-self: center; width: 100%;">
        <div style="background-color: red; height: 20px;"></div>
    </div>
</div>

方案2：用margin实现对齐（无需修改align属性）

如果是水平居中需求，直接给子元素设置左右margin为auto即可，不需要修改对齐属性，也能保留stretch状态下的宽度自适应特性：

<div style="display: flex; flex-direction: column;">
    <div style="max-width: 500px; margin: 0 auto;">
        <div style="background-color: red; height: 20px;"></div>
    </div>
</div>

两种方案都符合预期：父容器宽度大于500px时，元素宽度为500px且居中；父容器宽度小于500px时，元素自动和父容器同宽，不会溢出。

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