align-self: auto/stretch详细说明
2025-04-15
16
参考资料
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
:需填满剩余空间时(如等高布局)。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。