CSS align-self 属性值说明
| 值 | 说明 |
|---|---|
| auto | 该项继承其父容器的align items属性。这是默认值。 |
| stretch | 使项目（item）（item）拉伸以适合容器。 |
| center | 物品放在容器的中心。 |
| flex-start | 物品放在容器的开头。 |
| flex-end | 物品放在容器的末端。 |
| baseline | 项目（item）（item）位于容器的基线处。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父元素继承属性。 |
CSS align-self 属性在当前弹性行内对齐所选项目（item）（item）并覆盖 align-items 值。
align-self 属性是 CSS3 属性之一。
align-self 属性接受与 align-items 属性相同的值：
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
如果弹性项目（item）（item）的垂直边距设置为“自动”，则此属性将被忽略。
align-self 属性不适用于表格单元格或者块级框。
| 初始值 | auto |
|---|---|
| 应用于 | 灵活的项目（item）（item），网格项目（item）（item），绝对定位框。 |
| 继承 | 无效 |
| 可动画 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.alignSelf=“auto”； |
语法
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
align-self 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(1) {
align-self: flex-start;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the first box is set to "flex-start".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>
这是一个示例，其中使用了三个框，第二个框由“flex-end”值指定。
带有“flex-end”值的 align-self 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(2) {
align-self: flex-end;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the second box is set to "flex-end".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>
日期：2020-06-02 22:14:15 来源：oir作者：oir