CSS align-self 属性

align-self 属性用于控制 flex 容器中单个项目在交叉轴上的对齐方式。这个属性只对 flex 容器中的 flex 项目有效。

语法

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

• auto：默认值，继承自父元素的 align-items 属性。
• flex-start：项目在交叉轴的起始位置对齐。
• flex-end：项目在交叉轴的末尾位置对齐。
• center：项目在交叉轴的中心位置对齐。
• baseline：项目以基线对齐。
• stretch：项目被拉伸以适应容器。

示例

// www.javascriptcn.com code example
.container {
    display: flex;
    align-items: center;
}

.item1 {
    align-self: flex-start;
}

.item2 {
    align-self: center;
}

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

以上示例中，.container 是一个 flex 容器，设置了 align-items: center;，表示项目在交叉轴上居中对齐。而 .item1、.item2、.item3 分别设置了不同的 align-self 值，使它们分别在交叉轴的起始、中心、末尾位置对齐。

注意事项

• align-self 属性会覆盖 align-items 属性在单个项目上的设置。
• 如果项目的父元素不是 flex 容器，则 align-self 属性不会生效。
• align-self 属性只对 flex 项目有效，非 flex 项目不受影响。