参考资料

1. CSS尺寸属性详细说明以及案例
2. flex-direction: row/column
3. css阴影效果属性有哪些,
4. CSS有哪些常用的选择器？
5. css div阴影效果,
6. CSS浮动详细说明以及案例
7. 目标伪类选择器详细说明以及案例
8. 有没有现成的Vanta.js与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：需填满剩余空间时（如等高布局）。