Flexbox - 对齐项目( Align Items)
align-items属性与justify content相同。 但在这里，物品在交叉通道（垂直）上对齐。
Usage -
align-items: flex-start | flex-end | center | baseline | stretch;
此属性接受以下值 -
flex-start - 弹性项目在容器顶部垂直对齐。
flex-end - 弹性项目在容器底部垂直对齐。
flex-center - 弹性项目在容器的中心垂直对齐。
stretch - 柔性物品垂直对齐，使它们填满容器的整个垂直空间。
baseline - 对齐flex项目，使其文本的基线沿水平线对齐。
flex-start
将此值传递给属性align-items时，Flex项目在容器顶部垂直对齐。
以下示例演示将值flex-start传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
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-items ，flex-items在容器的底部垂直对齐。
以下示例演示将值flex-end传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:flex-end;
}
</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-items ，flex-items在容器的中心垂直对齐。
以下示例演示将值flex-center传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:center;
}
</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>
它会产生以下结果 -
新页面打开stretch
将此值传递给属性align-items ，flex-items将垂直对齐，以便它们填满容器的整个垂直空间。
以下示例演示将值stretch传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:stretch;
}
</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>
它会产生以下结果 -
新页面打开baseline
将此值传递给属性align-items ，将对齐flex-items，使其文本的基线沿水平线对齐。
以下示例演示了将值baseline传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:baseline;
}
</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>
它会产生以下结果 -
新页面打开