摘要：如何使用首先梳理一下，將屬性分為兩類作用在容器元素上的有個，其實容器元素上還有一個設置的屬性作用在子元素上的有個當時設置布局之后，子元素的的屬性將會失效。

長久以來，網頁布局是一個比較難搞的地方，各種前端前輩嘔心瀝血總結了各種奇淫巧技，比如利用float和position來實現居中、兩欄、三欄等等布局。然而css并不存在一個官方的布局方案，終于一種新的布局方案就出現了。

flex即是彈性盒子布局，既然有彈性那么就說明它是可以達到自適應的目的的。
根據我的理解，flex布局主要有兩部分需要注意，采用flex布局的元素叫做flex容器元素，flex容器元素內部的元素叫做子元素。flex布局的所有屬性也可以分為兩類，一部分是作用在容器元素，一部分作用在子元素。

借用一張MDN的圖，首先flex布局是二維的，就像平面直角坐標系一樣會有X軸和Y軸，所以如圖設置了display:flex的容器元素默認有橫向的主軸（main axis）和縱向的交叉軸（cross axis），當然了也可以設置為主軸為縱向交叉軸為橫向。
和主軸和交叉軸相關的還有main size和cross size，main size即是單個子元素占主軸的空間，cross size即是單個子元素占交叉軸的空間。

首先梳理一下，將屬性分為兩類：
作用在容器元素上的有7個：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、place-content，其實容器元素上還有一個設置display:flex/inline-flex的屬性
作用在子元素上的有6個：align-self、order、flex-grow、flex-shrink、flex-basis、flex
ps：當時設置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效。

display: flex | inline-flex
設置flex生成一個塊級的容器元素；inline-flex生成一個行級的容器元素

flex-direction: row | row-reverse | column | column-reverse
設置主軸的方向，會影響子元素在主軸的排列方向，默認是row

flex-wrap: nowrap | wrap | wrap-reverse
主軸尺寸固定時，子元素排列不下時，是否要換行

flex-flow: flex-direction 和 flex-wrap 的簡寫形式（沒什么好說的

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
決定了子元素在主軸上如何對齊

align-items: flex-start | flex-end | center | baseline | stretch
決定了子元素在交叉軸上如何對齊

align-content：flex-start | flex-end | center | space-between | space-around | stretch
定義的是多艮軸線的對其方式，當子元素只有一根軸線時，這個屬性不起作用
以默認主軸為例，如果子元素太多產生換行，此時子元素就有多個軸線，align-items設置的就是這多根軸線的對其方式，具體表現和justify-content、align-items一樣

place-content：是align-content和justify-content的縮寫

order：子元素在容器元素中排列的順序，數值越小排列越靠前，默認為0，可以取負值

align-self：auto | flex-start | flex-end | center | baseline | stretch
單個子元素在交叉軸上的對其方式，取值和表現方式與align-items一樣，但是只作用于單個子元素

flex-basis：auto |
flex-shrink：
flex-grow：
這三個屬性放在一起說，
flex-grow定義了容器元素有剩余空間時，子元素是否會放大以及如何放大，默認為0即不放大；如果所有子元素的flex-grow都是1，則在剩余空間中，所有子元素都取一份來放大；如果某子元素的flex-grow是2，則此子元素在剩余框架中取2份來放大。
flex-shrink定義了容器元素空間不足時，子元素是否會縮小以及如何縮小，默認為1即會縮??；如果所有子元素的flex-shrink都是0，則空間不夠時不縮?。蝗绻凶釉氐膄lex-shrink都是1，則空間不足時，所有子元素縮小相同的比例；如果某子元素的flex-shrink是2，則該子元素縮小的比例是其他子元素的2倍。
flex-basis定義了在分配多余空間之前，子元素占據的主軸空間，瀏覽器會根據這個來計算剩余空間，也就是說設置了flex-basis的子元素會覆蓋掉原來設置的尺寸大小；默認值為auto，即子元素原本的大小。

flex：flex-grow, flex-shrink 和 flex-basis的簡寫

參考資料：
MDN
知乎專欄-30分鐘學會flex