弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。但是该属性目前只有部分浏览器支持，因此在pc端开发中应用的比较少。但是对于移动端，webkit核心浏览器几乎一统天下，web界面的制作上，使用弹性盒子是非常不错的！
2、align-items：flex-start；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。css部分：.father2{ width:500px; height:400px; background: slategrey; margin:20px auto; display: -webkit-flex; display:flex; -webkit-align-items: flex-start; align-items: flex-start; } .son2{ background: darkseagreen; margin:10px; text-align: center; color: #fff; } .father2 div:nth-child(1){padding:10px;} .father2 div:nth-child(2){padding:15px 10px;} .father2 div:nth-child(3){padding:20px 10px;}html部分：<div class="father2"> <div class="son2">flex-start1</div> <div class="son2">flex-start2</div> <div class="son2">flex-start3</div></div>效果如图：
4、align-items：center；弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。css部分：.father4{ width:500px; height:400px; background: slategrey; margin:20px auto; display: -webkit-flex; display:flex; -webkit-align-items: center; align-items: center; } .son4{ background: darkseagreen; margin:10px; text-align: center; color: #fff; } .father4 div:nth-child(1){padding:10px;} .father4 div:nth-child(2){padding:15px 10px;} .father4 div:nth-child(3){padding:20px 10px;}html部分：<div class="father4"> <div class="son4">center1</div> <div class="son4">center2</div> <div class="son4">center3</div></div>效果如图：
