1、彈性布局的使用
（1） display：flex；給父容器添加這個屬性；
（2） display:flex; 容器添加彈性布局后，顯示為塊級元素；
display:inline-flex; 容器添加彈性布局后，顯示為行級元素；
（3） 設為 Flex布局后，子元素的float、clear屬性將失效。但是position屬性，依然生效。
2、作用於父容器的5個屬性
（1）flex-direction屬性決定主軸的方向（即項目的排列方向）。
row（默認值）： 主軸為水平方向，起點在左端；
row-reverse： 主軸在水平方向，起點在右端 ；
column：主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿。
（2）flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap（默認）：不換行。當容器寬度不夠時，每個項目會被擠壓寬度；
wrap： 換行，並且第一行在容器最上方；
wrap-reverse： 換行，並且第一行在容器最下方。
如下所示，使用彈性布局，橫向排列，起點在左邊，換行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>彈性布局</title> 9 <style> 10 .box { 11 width: 800px; 12 height: 500px; 13 background-color: aqua; 14 display: flex; 15 flex-wrap: wrap; 16 } 17 18 .box div { 19 width: 150px; 20 height: 150px; 21 background-color: blueviolet; 22 border: 2px solid black; 23 } 24 </style> 25 </head> 26 27 <body> 28 <div class="box"> 29 <div>第一個盒子</div> 30 <div>第二個盒子</div> 31 <div>第三個盒子</div> 32 <div>第四個盒子</div> 33 <div>第五個盒子</div> 34 <div>第六個盒子</div> 35 <div>第七個盒子</div> 36 </div> 37 </body> 38 39 </html>
（3）justify-content屬性定義了項目在主軸上的對齊方式。這個屬性與主軸方向息息相關。
主軸方向為：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊。
flex-start（默認值）： 項目位於主軸起點。
flex-end：項目位於主軸終點。
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。(開頭和最后的項目，與父容器邊緣沒有間隔)
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。(開頭和最后的項目，與父容器邊緣有一定的間隔)
space-evenly：每個項目兩側的間隔相等。所以，項目之間的間隔和項目與邊框的間隔相同。
第一張圖是space-between的效果，第二張圖是space-around的效果，第三張圖是 space-evenly的效果。
（4）align-items屬性定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。(文字的行高、字體大小會影響每行的基線)
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
（5）align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
(當項目換為多行時，可使用align-content取代align-items)
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。