align-self: auto 在父容器为 flex 或 grid 时继承 align-items 值，若父级未设置则按默认 stretch 行为拉伸，常见无效原因是父容器未启用 flex/grid 布局。
align-self: auto允许子元素继承其父容器的
align-items属性，或者基于自身内容和布局规则来确定其对齐方式。这为灵活控制单个子元素在交叉轴上的对齐方式提供了可能。
允许子元素继承或基于内容和布局规则确定对齐方式。
为什么我的 align-self: auto
看起来没起作用？
这其实是个常见问题。
align-self只有在父容器设置了
display: flex或
display: grid时才有效。如果父元素不是一个 Flexbox 或 Grid 容器，
align-self将被忽略。另外，检查一下父元素的
align-items属性，
align-self: auto默认会继承这个值。如果父元素的
align-items设置为
stretch，那么子元素可能会占据整个交叉轴空间，让你觉得
align-self: auto没有效果。
.parent {
display: flex; /* 或 display: grid */
align-items: center; /* 尝试不同的值，如 flex-start, flex-end */
}
.child {
align-self: auto; /* 默认继承 .parent 的 align-items 值 */
}align-self: auto
和其他 align-self
值有什么区别？什么时候应该用哪个？
align-self提供了多种值，包括
auto、
flex-start、
flex-end、
center、
baseline和
stretch。
auto的特殊之处在于它允许元素继承父元素的
align-items值，或者根据自身的布局特性来决定对齐方式。
立即学习“前端免费学习笔记（深入）”；
flex-start
: 子元素对齐到交叉轴的起始位置。flex-end
: 子元素对齐到交叉轴的结束位置。center
: 子元素在其交叉轴方向上居中对齐。baseline
: 子元素按照其基线对齐。stretch
: 子元素拉伸以填充整个交叉轴空间（受限于min-height
和max-height
）。
选择哪个值取决于你想要达到的具体布局效果。如果你希望某个子元素的对齐方式与其他子元素保持一致，并且跟随父元素的
align-items设置，那么
auto是一个不错的选择。但如果你需要对某个子元素进行特殊的对齐处理，那么选择其他明确的值会更合适。
举个例子，假设你有一个导航栏，其中大部分链接都应该垂直居中，但你希望其中一个链接始终位于底部。你可以将父容器的
align-items设置为
center，然后将特定链接的
align-self设置为
flex-end。
align-self: auto
在 Grid 布局中表现如何？与 Flexbox 有区别吗？
在 Grid 布局中，
align-self: auto的行为与 Flexbox 类似，但也有一些细微的差别。同样，它允许 Grid 项目继承其 Grid 容器的
align-items属性。如果 Grid 容器没有设置
align-items，或者设置为
auto，那么 Grid 项目会按照默认的
stretch行为进行拉伸，以填充整个 Grid 单元格的高度。
一个重要的区别是，Grid 布局提供了更强大的控制能力，可以精确地定义行和列的大小，以及 Grid 项目在单元格中的位置。这意味着即使你使用了
align-self: auto，Grid 项目的最终对齐方式仍然会受到 Grid 轨道大小和
grid-template-rows或
grid-template-columns的影响。
此外，Grid 布局还引入了
place-items和
place-self属性，它们是
align-items和
justify-items以及
align-self和
justify-self的简写形式，可以更方便地控制 Grid 项目的对齐方式。
总而言之，
align-self: auto在 Flexbox 和 Grid 布局中都扮演着重要的角色，但理解它们各自的特性和限制，才能更好地利用它们来创建灵活和响应式的布局。
