参考资料

  1. CSS有哪些常用的选择器?
  2. CSS 阴影效果属性
  3. CSS字体属性详细说明以及案例
  4. css中设置div居中
  5. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
  6. 动画属性详细说明以及案例
  7. align-self: auto/stretch详细说明
  8. CSS 阴影边框设置

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:需填满剩余空间时(如等高布局)。