align-self 是 CSS 中用于设置弹性容器中单个项目的交叉轴对齐方式的属性。该属性允许你为弹性容器中的每个项目指定独立的对齐方式,覆盖 align-items 属性设置的默认值。

语法:
align-self: auto | stretch | flex-start | flex-end | center | baseline;

  •  auto: 默认值。项目继承父容器的 align-items 属性。

  •  stretch: 项目将被拉伸以适应容器。

  •  flex-start: 项目将与交叉轴的开始边对齐。

  •  flex-end: 项目将与交叉轴的结束边对齐。

  •  center: 项目将位于交叉轴的中间位置。

  •  baseline: 项目将与基线对齐。


示例:
.item {
  align-self: flex-end;
}

在上述示例中,.item 是弹性容器中的一个项目,通过 align-self: flex-end; 设置该项目在交叉轴上与容器的结束边对齐。

使用 align-self 可以针对每个项目单独设置对齐方式,使得每个项目都可以有不同的交叉轴对齐效果。


转载请注明出处:http://www.zyzy.cn/article/detail/5977/CSS