align-self 是 CSS3 中用于定义弹性容器(flex container)内部项目(flex item)自身在交叉轴上的对齐方式的属性。与 align-items 类似,但 align-self 可以应用于单个项目,而不是整个容器。

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

属性值:

1. auto(默认值):
   - 元素继承父容器的 align-items 属性。

2. stretch:
   - 项目在交叉轴上拉伸以占用剩余的空间。

3. flex-start:
   - 项目向交叉轴的起始边对齐。

4. flex-end:
   - 项目向交叉轴的结束边对齐。

5. center:
   - 项目在交叉轴上居中对齐。

6. baseline:
   - 项目在交叉轴上以其基线对齐。

示例:
.container {
  display: flex;
}

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

在这个例子中,.container 是一个弹性容器,而 .item 是容器内的一个项目。.item 设置了 align-self: flex-end;,这会使该项目在交叉轴上朝着容器的结束边对齐。这个属性允许你单独为每个项目定义在交叉轴上的对齐方式,而不受整个容器的影响。


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