语法:
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