为什么需要弹性布局：
传统 display: float
position属性,
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
flex 弹性布局诞生：
1.flex-direction，指定主轴是哪一根(row、column) 主轴方向(row-reverse,column-reverse)
2. justify-content属性 /* 主轴对齐方式 */
/* flex-start: 左对齐 flex-start 右对齐 center: 居中对齐 space-between: 左右对齐 */
3. flex-wrap: wrap;
/* 如果当水平填充满了以后是否换行 **/
4. align-items: center; /* 测轴对齐方式 */
5. flex-grow: 1; 权重
案例demo使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex; /* 声明该容器使用flex布局*/
flex-direction: row; /* 1.指定主轴是哪一根(row、column) 主轴方向(row-reverse,column-reverse) **/
justify-content: space-between; /* 主轴对齐方式 */
/* flex-start: 左对齐 flex-start 右对齐 center: 居中对齐 space-between: 左右对齐 */
flex-wrap: wrap;
/* 如果当水平填充满了以后是否换行 **/
align-items: center; /* 测轴对齐方式 */
/*align-content: center;*/
/* align-items: flex-end;*/
}
#wrap > .item{
width: 30px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
/* 3.弹性空间: 弹性因子
* 宽度为400- 50*5 =150,这150就是弹性空间
* 那么一个item的权值都是1，总共有5份, 那么每一份都是30
* 把这个30加入到每一个容器中，每个容器大小是50+30=80
* 可以当做Android 线性布局权重使用
*/
flex-grow: 1;
}
</style>
</head>
<body>
<!-- #warp:是容器 item:是项目 -->
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<!--<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>-->
</div>
</body>
</html>
因篇幅问题不能全部显示，请点此查看更多更全内容