align-self: auto/stretch详细说明

参考资料

1. 多重选择器详细说明以及案例
2. CSS阴影颜色
3. css阴影效果属性
4. 伪元素选择器详细说明以及案例
5. css中div居中
6. 如何用添加产品图片和描述？
7. CSS弹性盒子详细说明以及案例
8. css div阴影效果

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：需填满剩余空间时（如等高布局）。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。