css flex 教程
css flex align-items属性 交叉轴上对齐方式垂直对齐方式
css flex align-items属性子元素在交叉轴上对齐方式，如果不好理解，可以把flex-direction设置为row，理解成垂直对齐方式即可,注意我们演示的例子每个子元素的高度不一样，和align-content的区别请点击左边align-content属性菜单查看。
align-items属性
| 可选值 | 说明 |
|---|---|
| flex-start | 交叉轴的起点对齐，理解成顶部对齐（假设每个子元素的高度不一样） |
| flex-end | 交叉轴的终点对齐，理解成底部对齐（假设每个子元素的高度不一样） |
| center | 交叉轴的中点对齐，理解成功水平方向居中对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 默认值，如子元素未设置高度或设为auto，将占满整个父元素的高度。 |
flex-start例子
<style>
.boxs
{
width:80%;
height:100px;
border:1px solid #333;
display:flex;
align-items:flex-start;
}
.boxs div
{
width:20%;
}
</style>
<div class="boxs">
<div class="boxs">
<div style="background-color:#ffc5c5;height:38px" >子元素A</div>
<div style="background-color:#7171f7;height:60px" >子元素B</div>
<div style="background-color:#c6d8c6;height:20px" >子元素C</div>
<div style="background-color:#c9b0fb;height:80px" >子元素D</div>
</div>
</div>例子
flex-end例子
例子
center例子
例子
baseline例子
例子
stretch例子
例子