CSS align-self 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

align-self是 CSS 中用于控制弹性盒子（flexbox）或网格（grid）布局中单个项目沿交叉轴对齐方式的属性。

它只对弹性盒子和网格布局中的项目有效。
它会覆盖父容器的align-items属性。
在网格布局中，它控制网格区域内项目的对齐方式。
在弹性布局中，它控制项目在交叉轴上的对齐方式。

常用的实例

接下来通过实例演示align-self属性的用法，来深化您对align-self属性的理解。

实例代码运行代码

复制

.container {
    display: flex;
    height: 300px;
    align-items: center; /* 默认对齐方式 */
}

.flex-start {
    align-self: flex-start; /* 覆盖默认对齐方式 */
}

CSS 语法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值

值	描述
`auto`	元素继承其父容器的`align-items`属性，如果没有父容器，则为 "stretch"。（默认值）
`stretch`	元素被拉伸以适应容器。
`center`	元素位于容器的中央。
`flex-start`	元素位于容器的开头。
`flex-end`	元素位于容器的末端。
`baseline`	元素被定位到容器的基线。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。