CSS Flexbox中align-self如何独立调整子项对齐方式？

本文共计959个文字，预计阅读时间需要4分钟。

它只在父容器是 `display: flex` 或 `display: inline-flex` 时生效，作用对象是某个具体元素的 `flex` 子元素（flex item），而非容器本身。其核心价值在于一句话：

• align-self 的默认值是 auto，此时它会继承父容器的 align-items 值；没父容器则等效于 stretch
• 只要给某个子元素设了非 auto 的值（比如 flex-end），它就立刻脱离统一规则，独立行动
• 这个属性不改变主轴对齐（那是 justify-content 或 order 的事），只管交叉轴——而交叉轴方向取决于 flex-direction：若为 row，交叉轴是垂直方向；若为 column，交叉轴是水平方向

什么时候必须用 align-self 而不是改 align-items

典型场景是“多数一致，个别例外”——比如表单里所有输入框垂直居中，但提交按钮要底部对齐；或者卡片布局中标题上对齐、操作按钮下对齐。