参考资料

1. css实现阴影效果
2. Flexbox布局有哪些常见的误区？
3. 有没有推荐的 CSS 过渡动画库？
4. align-self: auto/stretch详细说明
5. 如何优化Flexbox布局的性能？
6. 层次/关系选择器详细说明以及案例
7. 伪元素选择器详细说明以及案例
8. 如何避免 CSS 过渡动画卡顿？

align-self: auto/stretch详细说明

align-self: auto

• 作用：继承父容器的 align-items 值。

• 示例：

  .parent {
    display: flex;
    align-items: center; /* 父容器设置 */
  }
  .child {
    align-self: auto; /* 子项继承父容器的 center */
  }

• 效果：子项垂直居中（与父容器 align-items 一致）。

align-self: stretch

• 作用：拉伸子项以填满交叉轴方向的空间（高度/宽度）。

• 示例：

  .parent {
    display: flex;
    height: 200px;
  }
  .child {
    align-self: stretch; /* 子项高度撑满父容器 */
  }

• 效果：子项高度变为 200px（与父容器等高）。

关键区别

• auto：依赖父容器的 align-items。

• stretch：强制拉伸，无视父容器设置。

适用场景

• auto：需与父容器对齐一致时。

• stretch：需填满剩余空间时（如等高布局）。