Flexbox 对齐自身
此属性类似于
align-items，但在这里，它应用于单个 flex 项。
用法-
align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex-start-弹性项目将在容器顶部垂直对齐。
flex-end-flex 项目将在容器底部垂直对齐。
flex-center-弹性项目将在容器的中心垂直对齐。
Stretch-弹性项目将垂直对齐，以填充容器的整个垂直空间。
baseline-弹性项目将在横轴的基线处对齐。
flex-start
将此值传递给属性 align-self 时，特定的 flex-item 将在容器顶部垂直对齐。
以下示例演示了将值
flex-start 传递给
align-self 属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:start;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
flex-end
将此值传递给属性
align-self 后，特定的 flex-item 将在容器底部垂直对齐。
以下示例演示了将值
flex-end 传递给
align-self 属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:flex-end;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
中心
将值
center 传递给属性
align-self 后，特定的 flex-item 将在容器的中心垂直对齐。
以下示例演示了将值
center 传递给
align-self 属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:center;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
拉伸
将此值传递给属性
align-self 后，一个特定的 flex 项将垂直对齐，从而填满容器的整个垂直空间。
以下示例演示了将值拉伸传递给
align-self 属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:stretch;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
