flex佈局

---恢復內容開始---

flex，意爲彈性佈局；

flex的樣式屬性分爲兩種，一個是做用在容器上的，即設置爲flex的元素，一個是做用在成員上的；

一、做用在容器上的屬性

flex-direction:設置容器排列方向，默認主軸即水平方向；屬性值：row、row-reverse 、column、column-reserve

flex-wrap:元素換行，即子元素在軸線上放不下時是否換行以及如何換行;屬性值：nowrap（不換行）、wrap（換行）、wrap-reverser（換行反轉）

flex-flow:flex-direction和flex-wrap的簡寫

justifty-content：主軸的對齊方式，不必定是水平軸，由flex-direction指定；屬性值：center(居中對齊)、space-between(兩邊對齊均勻分佈)、space-around(項目兩側等間隔)、flex-start(起始對齊)、flex-end(結束對齊)、space-evenly(均勻分佈)

align-items:交叉軸對齊方式;屬性值：：center(交叉軸中點)、flex-start(交叉軸起點)、flex-end(交叉軸終點)、baseline（文字基線）、stretch(未設置高度時填充容器)

align-content：多軸對齊方式，只有一軸的時候沒有效果

二、元素屬性

爲每個成員設置單獨屬性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

order:順序，從小到大，值越小，排列越靠前flex-shrink：縮小比例（容器寬度<元素總寬度時如何收縮）

實例：彈性容器#container寬度是200px，一共有三個彈性元素，寬度分別是50px、100px、120px。在不折行的狀況下，此時容器寬度是明顯不夠分配的，flex-shrink默認爲1，也就是當不夠分配時，元素都將等比例縮小，佔滿整個寬度，結果爲：彈性元素1：50px→37.03px；彈性元素2：100px→74.08px；彈性元素3：120px→88.89px

flex-grow：放大比例（容器寬度>元素總寬度時如何伸展）

實例：彈性容器#container寬度是200px，但此時只有兩個彈性元素，寬度分別是50px、100px。此時容器寬度是有剩餘的。

狀況一：flex-grow都爲0，即便存在剩餘空間，也不放大；

狀況二：flex-grow爲大於零的值，實現容器剩餘寬度的分配比例設置。flex-grow分別爲2和3，結果爲70px 和 130px;

狀況三：彈性容器的寬度正好等於元素寬度總和，無多餘寬度，此時不管flex-grow是什麼值都不會生效。

flex-basis：設置的是元素在主軸上的初始尺寸，所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

flex： flex-grow + flex-shrink + flex-basis

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto;

flex: none = flex: 0 0 auto; // 經常使用於固定尺寸 不伸縮