CSS align-self 属性
更多“自己尝试”的例子见下文。
定义和用法
align-self 属性用于指定 Flexbox 或 Grid 容器中选定项在块方向上的对齐方式。
对于英文页面，块方向向下，行内方向从左到右。
提示：要在行内方向而不是块方向上对齐 Grid 项，请使用 justify-self 或 justify-items 属性。
注意：align-self 属性会覆盖 Grid 或 Flex 容器的 align-items 属性。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| align-self | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
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 |
更多示例
Grid 布局中的 align-self
使用 align-self 属性，在块方向上将单个 Grid 项的对齐方式设置为结束位置
#container {
display: grid;
}
#myDiv {
align-self: end;
}
自己动手试一试 »
相关页面
CSS 教程：CSS Grid
CSS 教程：CSS Flexbox
CSS 参考：align-content 属性
CSS 参考： align-items 属性
CSS 参考： justify-self 属性
HTML DOM 参考：alignSelf 属性
