先看上面的代碼，解釋一下意思，看你能認識多少（后面有注釋）：
1 .container { 2 display: flex; //彈性布局 3 flex-direction: column; //容器內項目的排列方向 （column沿垂直主軸由上到下排列） 4 align-items: center; //項目在交叉軸上如何對齊 （center居中） 5 background-color: #b3d4db; //設置背景顏色 6 } 7 有點暈，因為我沒給你說明一些專有名詞：
1，什么是主軸，什么是交叉軸？
下面就給你解釋一下上面的問題，咱們先看圖：
1，水平主軸就是圖中的（main axis）線標出的
2，垂直交叉軸就是（cross axis）線標出的
那其他的又是什么？
看下面的全部解釋：
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
了解了以上基礎之后，我們進一步了解一下Flex(彈性盒子)的六個屬性，這幾個屬性主要就是在上面基礎之上來設置容器不同的位置（下面有圖文解釋）;
以下6個屬性設置在容器上：
- flex-direction 容器內項目的排列方向(默認橫向排列)
- flex-wrap 容器內項目換行方式
- flex-flow 以上兩個屬性的簡寫方式
- justify-content 項目在主軸上的對齊方式
- align-items 項目在交叉軸上如何對齊
- align-content 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
接下來一個一個解釋（耐心看）：
（1）flex-direction：row；（默認情況）
1 .container { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }
注意：當x軸上排列時，子元素都是inline-block元素；當y軸上排列時，子元素都是block元素。
（2）是否換行：flex-wrap：nowrap；（默認所有子元素在一行排列）1 .container{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }
如果可以換行，那么第一行有幾個子元素？第二行有幾個子元素？
1 <style> 2 .container{ 3 display: flex; 4 5 flex-wrap: wrap; 6 width: 400px; 7 height: 400px; 8 border: 1px solid black; 9 } 10 .item{ 11 width: 98px; 12 height: 100px; 13 border: 1px solid black; 14 } 15 .item:nth-of-type(1){ 16 flex-grow: 1; 17 } 18 .item:nth-of-type(2){ 19 flex-grow: 1; 20 } 21 .item:nth-of-type(3){ 22 flex-grow: 1; 23 } 24 .item:nth-of-type(4){ 25 flex-grow: 1; 26 } 27 .item:nth-of-type(5){ 28 flex-grow: 1; 29 } 30 </style> 31 <body> 32 <!-- 容器 --> 33 <div class="container"> 34 <!-- 項目 --> 35 <div class="item">1</div> 36 <div class="item">2</div> 37 <div class="item">3</div> 38 <div class="item">4</div> 39 <div class="item">5</div> 40 </div> 41 </body>
上述代碼：每個子元素的盒子的寬度 98+2 = 100px，而“容器”的content去的寬度：400px，所以第一行可以放置4個子元素；讓后將第五個子元素放置在第二行，同時注意高度
如果：子元素的盒子寬度：100px + 2px = 102px，那么第一行有三個子元素，第二行有兩個子元素，同時注意高度
如果把子元素的高度設置為：150px，那么效果：
如果子元素一共有三行，那么效果：子元素的寬：196px，高100px
結論：（子元素x軸方向排列）設置換行屬性后，子元素先在第一行排列，（子元素的盒模型寬=border+padding+content）與（“容器”的content寬度）能放下的就放在該行，不能放下的放在下一行。
兩行時，將容器分為兩個半區，每一行在自己的半區內居上（父級的align-items屬性，默認是：flex-start）；同理：三行時，將容器分為三個半區，每一行也是在自己的半區內居上。
重點是：有幾行，就將容器上下分為幾個半區。（默認情況align-content：stretch）
（3）justify-content：默認值：flex-start；
項目在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設置了)
flex-start：在主軸上由左或者上開始排列
flex-end：在主軸上由右或者下開始排列
center：在主軸上居中排列
space-between：在主軸上左右兩端或者上下兩端開始排列
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
1 <style> 2 .container{ 3 display: flex; 4 justify-content: center; 5 flex-wrap: wrap; 6 width: 400px; 7 height: 400px; 8 border: 1px solid black; 9 } 10 .item{ 11 width: 100px; 12 height: 100px; 13 border: 1px solid black; 14 } 15 16 </style> 17 <body> 18 <!-- 容器 --> 19 <div class="container"> 20 <!-- 項目 --> 21 <div class="item">1</div> 22 <div class="item">2</div> 23 <div class="item">3</div> 24 <div class="item">4</div> 25 <div class="item">5</div> 26 </div> 27 </body>
（4）在側軸上如何對齊：align-items：stretch（默認值）
注意：stretch值在有height值時，height值決定高度
當子元素中無height值時，效果：
主要看下兩個軸的時，效果：
因為有兩行，第一行占容器的上半區，第二行占容器的下半區，每一行都在自己的半區居中。
（5）align-content：stretch（默認值）
注意：當只有一行flex項時，此屬性不起作用。
該屬性在多行下，設置每一行在容器的排列。
比如：align-content：flex-start
4. “項目”中的屬性
注意：子級元素設置的寬是100px，但是盒模型的寬卻是78px，要注意的是，width值的存在意義重大，尤其是計算布局時。
（1）order：number；該子級的先后順序中排第幾位
默認情況下，每一個子級按照標簽的先后順序在頁面中布局，但是order可以改變子級在頁面中的先后順序。
1 <style> 2 .container{ 3 display: flex; 4 width: 400px; 5 height: 400px; 6 border: 1px solid black; 7 } 8 .item{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid black; 12 } 13 .item:nth-of-type(1){ 14 order: 5 15 } 16 .item:nth-of-type(2){ 17 order: 4 18 } 19 .item:nth-of-type(3){ 20 order: 3 21 } 22 .item:nth-of-type(4){ 23 order: 2 24 } 25 .item:nth-of-type(5){ 26 order: 1 27 } 28 </style> 29 <body> 30 <!-- 容器 --> 31 <div class="container"> 32 <!-- 項目 --> 33 <div class="item">1</div> 34 <div class="item">2</div> 35 <div class="item">3</div> 36 <div class="item">4</div> 37 <div class="item">5</div> 38 </div> 39 </body>
（2）flex-grow：number；子級在該行中所占的剩余空間比例。
剩余空間：就是子級的原始盒模型（設置的border+padding+content值）要是沒有剩余空間，該值是無效的
比如：.item:nth-of-type(5){ flex-grow: 2; }
但是效果：因為沒有剩余空間，所以flex-grow是無效的。同時，該例子中，
（3）flex-shrink：number；每一行中，子元素按原始盒模型排列后，超出“容器”的部分，按照比例大小進行收縮（砍掉），每個子元素中該值越大，被砍掉的越多，默認值為1
比如：上面圖片效果中，5個子元素的flex-shrink都是默認值1，所以，都被等比例的砍掉了一部分
無意中，發現一個知識點：
如果子元素中，原始盒模型 > flex盒模型，內容是數字或者英語單詞，且數字或英語單詞過長，超過了flex盒模型的寬度，那么內容會撐開flex盒模型的寬度，直到原始盒模型的width值，內容如果繼續增長，flex盒模型的寬度，不再增大，內容溢出。同時其他的子元素的flex盒模型重新計算布局。
如果子元素的原始盒模型 < flex盒模型，那么無上述效果。
（4）flex-basis：length | 0 | auto，（auto是默認值）
1）當值是：length長度的時候，它可以是長度（例如20％，5rem，10px等），flex-basis屬性設置子元素的寬或高，當然width也是設置子元素的原始盒模型的寬，flex-basis值會替代width值
比如：第一個子元素設置：flex-basis：120px，那么第一個子元素的原始盒模型width = 120px，將剩余空間進行分配后，每個子元素的獲得24.67的寬度。所以結果如下圖：
1 <style> 2 .container{ 3 display: flex; 4 width: 400px; 5 height: 400px; 6 border: 1px solid black; 7 } 8 .item{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid black; 12 } 13 .item:nth-of-type(1){ 14 flex-grow: 1; 15 flex-basis: 120px; 16 } 17 .item:nth-of-type(2){ 18 flex-grow: 1; 19 } 20 .item:nth-of-type(3){ 21 flex-grow: 1; 22 } 23 </style> 24 <body> 25 <!-- 容器 --> 26 <div class="container"> 27 <!-- 項目 --> 28 <div class="item">1 內容區：144.67*102</div> 29 <div class="item">2 內容區：124.67*102</div> 30 <div class="item">3 內容區：124.67*102</div> 31 </div> 32 </body>
2）那么當flex-basis：0時，相當於原始width的值是0；上述代碼中的第一個子元素的flex-basis：0；結果：
因為第一個子元素的寬度是66.67，小於 原始盒模型的width值100px，所以當第一個子元素內容是數字或者單詞的時候，若數字或單詞的長度大於了flex盒模型的寬度，那么flex的盒模型的寬度會隨着單詞或數字的長度增大，直至原始盒模型的width100px。
3）flex-basis：auto；默認值。
（5） flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
這是速記flex-grow, flex-shrink和flex-basis組合。第二個和第三個參數（flex-shrink和flex-basis）是可選的。默認是0 1 auto
（6）align-self：允許子元素對容器的align-items屬性進行覆蓋設置
-
.item {
-
align-self: auto | flex-start | flex-end | center | baseline | stretch;
-
}
請注意float，clear、column、vertical-align等屬性對彈性無效。