学习完上面的justify-content水平对齐方式后，我们可以来和align-items来区别使用。
一、介绍align-items属性
和justify-content不同的是，align-items主要是垂直方向的对齐方式，
属性介绍：flex-start、flex-end、center、initial、inherit
二、举例说明
<style>
.first{
width: 300px;
height: 300px;
border: 1px solid blueviolet;
}
.first div{
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="first">
<div class="one" style="background-color: khaki;">AA</div>
<div class="two" style="background-color: lawngreen;">BB</div>
<div class="three" style="background-color: lightcoral;">CC</div>
</div>
</body>
初始运行方式：
(1)flex-start属性测试结果：
<style>
.first{
width: 200px;
height: 200px;
border: 1px solid blueviolet;
display: flex;
align-items: flex-start;
}
.first div{
width: 30px;
height: 30px;
display: flex;
}
</style>
运行结果：
(2)center属性测试：
(3)flex-end属性测试：
<style>
.first{
width: 200px;
height: 200px;
border: 1px solid blueviolet;
display: flex;
/* align-items: center; */
align-items: flex-end;
}
.first div{
width: 30px;
height: 30px;
display: flex;
}
</style>
运行结果：
(4)baseline属性测试：
解释：元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
.first{
width: 200px;
height: 200px;
border: 1px solid blueviolet;
display: flex;
/* align-items: center; */
/* align-items: flex-end; */
align-items: baseline;
}
其他属性大家可以自己测试一下。一般是使用上面三个就够了。
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
