html的flex佈局？

每當我們去進行前端頁面佈局時都會用到float、position、margin等一些屬性，這些屬性用起來略顯麻煩，並且瀏覽器去進行渲染時會大大消耗效能。

需要注意的是： 任何容器都可以指定為flex佈局，但是在flex佈局中float、clear、vertical-align都會失效。

1.主軸方向

flex容器分為x軸與y軸，x軸正方向預設從左至右，y軸正方向預設從上到下。

定義一個容器為彈性佈局display:flex;主軸預設方向為左到右;如果我們想去改變flex的預設方向，就需要用到flex-direction屬性flex-direction有四個屬性值，分別是row、row-reverse、column、column-reverse，分別為從左到右、從右到左、從上到下、從下到上!

2.主軸方向的對齊方式

(1)justify-content:flex-start則主軸為左對齊

(2)justify-content:flex-end 則主軸為右對齊

(3)justify-content:center 則主軸為居中

(4)justify-content:space-between則每個子專案之間等距離，前提是有剩餘空間

(5)justify-content:space-around則每個子專案會平分剩餘空間，子專案與父元素邊界處也會存在距離

3.縱向單行對齊方式

(1)align-item:flex-start縱向從上到下

(2)align-item:flex-end縱向從下到上

(3)align-item:center縱向居中對齊

(4)align-item:baseline以基線對齊

(5)align-item:strech這是預設方式

4.子專案換行

(1)flex-wrap:wrap超出父元素會換行

(2)flex-wrap:wrap-reverse反向換行

(3)flex-wrap:no wrap這是預設方式,不換行

5.縱向多行對齊方式

(1)align-content:flex-start上對齊

(2)align-content:flex-end下對齊

(3)align-content:center上下居中

(4)align-content:space-between

(5)align-content:space-around

以上均是新增到父元素身上的屬性

6.子專案的一些屬性

(1)order:0,定義子專案的排序位置，數值越小越靠前，預設為0

(2)flex-grow:0;定義子專案的放大比例，預設為0不放大

(3)flex-shrink:1;定義子專案的縮小比例，預設為1，空間不足將等比縮小，0則不縮小，負值無效

(4)flex-basis:1;定義子專案佔據空間，預設為auto，可以設定百分比，也可以是固定值

以上三種屬性可以簡寫，比如flex：1,1,1順序如上