前言
隨着電子產品的快速迭代，傳統的前端佈局越來越難以是配多端的屏幕顯示，無論是table佈局還是float佈局在移動端適配上都有着很大的侷限性。09年，W3C提出了一種新的方案—-Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局，flex的應用可以極大程度上補充傳統佈局的不足之處。
flex佈局是什麼
Flex是flex box的縮寫意爲彈性佈局，用來爲盒狀模型提供最大的靈活性。
特點：採用flex佈局的元素成爲flex容器，他的所有子元素自動成爲容器的成員。
借用騰訊雲社區的一張圖
由圖中我們可以看出flex佈局其實是將我們的元素看成一個一左上角爲原點的直角座標系。
如何使用flex佈局
-
主軸（flex佈局以主軸和交叉軸爲主的。理解他們是掌握flex佈局的基礎。）
主軸由flex-direction定義他可以去四個值：row row-reverse column column-reverse
- row 或者 row-reverse，你的主軸將沿着 inline 方向延伸。
- column 或者 column-reverse，你的主軸會沿着上下方向延伸,及block方式。
- 交叉軸垂直於主軸，所以如果你的flex-direction (主軸) 設成了 row row-reverse則交叉軸爲垂直方向
- 如果flex-direction (主軸) 設成了 column column-reverse則交叉軸爲水平方向。
-
按需固定元素位置（容器內元素屬性設置）
- justify-content - 控制主軸上所有 flex 項目的對齊（相比margin auto要方便的多）。
- align-items - 控制交叉軸上所有 flex 項目的對齊（有了這個屬性不用再考慮父元素有多高top是多少了）。
- align-self - 控制交叉軸上的單個 flex 項目的對齊。
- align-content - 控制“多條主軸”的 flex 項目在交叉軸的對齊（要使得 align-content 生效，flex 容器的height要大於 flex 項目的可視內容。然後它會將所有的 flex 項目打包成一塊之後再對齊剩下的空間）。
-
應對頁面彈性伸縮（容器內元素屬性設置）
-
flex-shrink/grow: 比例縮小/放大
flex-grow:flex-grow屬性默認等於0，即使用本來的寬度，不拉伸。等於1時，就表示該項目寬度拉伸，佔據當前行的所有剩餘寬度。
flex-shrink:flex-shrink的默認值爲1，當父元素的寬度小於所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值爲0，表示不減小。
-
flex-basis（初始值：auto）:指定了item在flex佈局中的初始大小（前提是不改變盒模型的box-sizing），所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。另外其設置的優先級高於width。
-
-
flex 屬性總結（這裏只做簡要說明，詳細請查看mdn文檔）
-
容器屬性
flex-flow:屬性是flex-direction屬性和flex-wrap屬性的簡寫形式flex-direction:屬性決定主軸的方向
flex-wrap:屬性決定軸線排不下，如何換行
justify-content:屬性決定項目在主軸上的對齊方式
align-items:屬性決定項目在交叉軸上的對齊方式
align-content:屬性定義了多根軸線的對齊方式（一條軸線時不起作用）
-
項目的屬性
order:定義項目的排列項目
flex-grow:定義項目的放大
flex-shrink:定義項目的縮小
flex-basis:定義項目的基本大小
flex:屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。
align-self:單個項目定義的屬性，可覆蓋align-items屬性。
-
爲什麼要使用flex佈局
- flex佈局的思想簡單明瞭初學者很容易上手
- 他可以很好的適應多端佈局（響應各種頁面）
- 爲盒狀模型提供最大的靈活性
總結
隨着當前電子產品的快速發展，適應各種設備的顯示已成爲我們前端開發者必備的技能。5-10年前我們只用考慮幾種的設備適配，到如今的十幾種細分來說甚至幾十種，這就需要我們掌握一種可以輕鬆實現頁面響應式佈局的技能，而flex便可以滿足我們當前的需求。
注意：
Internet Explorer 10： 使用-ms-前綴；
UC瀏覽器： 使用-webkit-前綴。
現在，IE11 已經支持display: flex，但是在使用的時候會有一些bug。