爲什麼需要彈性佈局：
傳統 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>