CSS align-self 属性
下面还有更多“亲自试一试”的示例。
定义和用法
align-self 属性指定在 flexbox 或 grid 容器内，所选项目的块方向上的对齐方式。
对于英文页面，块方向是向下，内联方向是从左到右。
提示：要对齐网格项目在内联方向而不是块方向上的位置，请使用justify-selfjustify-items
注意：align-self 属性会覆盖网格或弹性容器的 align-items
| 默认值 | auto |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 阅读有关可动画的信息 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.alignSelf="center" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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的信息 |
更多示例
网格布局中的 align-self
使用 align-self 属性为单个网格项目设置块方向上的结尾对齐方式
#container {
display: grid;
}
#myDiv {
align-self: end;
}
亲自试一试 »
相关页面
CSS 教程：CSS 网格
CSS 教程：CSS Flexbox
CSS 参考：align-content 属性
CSS 参考：align-items 属性
CSS 参考：justify-self 属性
HTML DOM 参考：alignSelf 属性
