flex佈局又稱彈性佈局
1. 給父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性佈局顯示，而不遵循常規文件流的顯示方式；在item裡面使用的任何佈局都會失效

 1 <template>
 2     <div>
 3         <div class="box">
 4             <div class="item">1</div>
 5             <div class="item">2</div>
 6             <div class="item">3</div>
 7
 
             <div class="item">4</div>
 8         </div>
 9     </div>
10 </template>
11 
12 <script>
13 </script>
14 
15 <style>
16     .box{
17         width: 500px;
18         height: 500px;
19         background-color: pink;
20         margin: 100px auto;
21         /*
 
 採用 flex 佈局*/
22         display: flex;
23         /* 設定主軸的方向 */
24         flex-direction: row; /* （預設） 主軸為水平方向，起點在左端 */
25         /* flex-direction: row-reverse; /* 主軸為水平方向，起點在右端 */ 
26          /* flex-direction: column; /* 主軸為垂直方向 ，起點在上方 */
27         /* flex-direction: column-reverse; /* 主軸為垂直方向 ，起點在下方*/ 
28
 
         
29         /* 是否換行  如何換行 */
30         /* flex-wrap: nowrap; /* 不換行 當容器的寬度不夠時  每個item 會被擠壓寬度 */
31         flex-wrap: wrap; /* 換行 預設*/
32         
33         /* item 的對齊方式 */
34         /* justify-content: flex-start; /* 專案位於主軸起點 */ 
35         /* justify-content: flex-end; /* item位於主軸終點*/ 
36         justify-content: center; /* item 居中 
37         /* justify-content: space-between; /*兩端對齊，item之間的間隔都相等。(開頭和最後的專案，與父容器邊緣沒有間隔) */ 
38         /* justify-content: space-around; /*每個item兩側的間隔相等*/
39         
40         /* align-items: flex-start;  /* 交叉軸的起點對齊  預設*/
41         /* align-items: flex-end;  /* 交叉軸的終點對齊*/
42         align-items: center; /* 交叉軸的中點對齊 
43         /* align-items: baseline; /* 以第一行文字的基線對齊*/ 
44         /* align-items: stretch; /* 預設值   如果item未設定高度設為auto 將佔滿整個容器*/ 
45         
46         
47     }
48     .item{
49         width: 100px;
50         height: 100px;
51         background-color: aqua;
52         font-size: 30px;
53         text-align: center;
54         line-height: 100px;
55         border: 1px solid #000;
56     }
57 </style>

樣式如下

2.display: flex;使用的12大屬性
12個屬性分為兩類，
6個作用於父容器（box），
6個作用於子容器（item）。
1.作用於父元素的屬性（即作用在box上面）

① flex-direction屬性決定主軸的方向（即item的排列方向）。

row（預設值）： 主軸為水平方向，起點在左端；

row-reverse： 主軸在水平方向，起點在右端 ；

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

效果如下所示：

② flex-wrap屬性定義，如果一條軸線排不下，如何換行。

nowrap（預設）：不換行。當容器寬度不夠時，每個專案會被擠壓寬度；item 的寬高設定是不變的

wrap： 換行，並且第一行在容器最上方；

③ flex-flow 是flex-direction和flex-wrap的縮寫形式，

預設值為：flex-flow: row wrap; 水平方向 換行

④ justify-content屬性定義了專案在主軸上的對齊方式。 （常用）

>>> 此屬性與主軸方向息息相關。

主軸方向為：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，

column-reverse-起點在下邊

flex-start（預設值）： 專案位於主軸起點。

flex-end：專案位於主軸終點。

center： 居中

space-between：兩端對齊，專案之間的間隔都相等。(開頭和最後的專案，與父容器邊緣沒有間隔)

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。(開頭和最後的專案，與父容器邊緣有一定的間隔)

⑤ align-items屬性定義專案在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。(文字的行高、字型大小會影響每行的基線)
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。