弹性容器----六大属性（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:20pxauto;background-color:#894798;/*弹性容器*/display:flex;/*弹性容器----六大属性*/flex-flow:rowwrap;/*5.项目在交叉轴上的对齐方式元素的主轴方向还是水平轴（flex-flow:rowwrap;）*//*(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><divclass="parent"><divclass="item1ml">1---小李子</div><divclass="item2h200">2---是憨憨</div><divclass="item1">3</div><divclass="item2">4</div><divclass="item1">5</div><divclass="item2">6</div></div>
