弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
align-items属性定义项目在交叉轴（纵轴|侧轴）上如何对齐。 语法：
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
注意：你使用align-items:stretch;的大前提是 弹性项目没有高度或者弹性项目的高度是auto。
<title>项目在交叉轴上的对齐方式</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 600px;
margin: 20px auto;
background-color: #894798;
/* 弹性容器 */
display: flex;
/* 弹性容器----六大属性 */
flex-flow: row wrap;
/* 5. 项目在交叉轴上的对齐方式 元素的主轴方向还是水平轴（flex-flow: row wrap;）*/
/* (1) flex-start：交叉轴的起点对齐 项目居上显示*/
/* align-items: flex-start; */
/* (2) flex-end：交叉轴的终点对齐 项目居底显示 */
/* align-items: flex-end; */
/* (3) center：交叉轴的中点对齐 */
/* align-items: center; */
/* (4)baseline: 项目的第一行文字的基线对齐 */
align-items: baseline;
}
.parent .item1{
width: 100px;
height: 100px;
background-color: #e88024;
margin-left: 10px;
}
.parent .item2{
width: 600px;
height: 100px;
background-color: #e88024;
margin-left: 10px;
}
.parent .item1.ml{
margin-left: 0;
}
.parent .item2.h200{
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="item1 ml">1---小李子</div>
<div class="item2 h200">2---是憨憨</div>
<div class="item1">3</div>
<div class="item2">4</div>
<div class="item1">5</div>
<div class="item2">6</div>
</div>