深刻理解flex佈局

前言

隨着電子產品的快速迭代，傳統的前端佈局愈來愈難以是配多端的屏幕顯示，不管是table佈局仍是float佈局在移動端適配上都有着很大的侷限性。09年，W3C提出了一種新的方案—-Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局，flex的應用能夠極大程度上補充傳統佈局的不足之處。

flex佈局是什麼

Flex是flex box的縮寫意爲彈性佈局，用來爲盒狀模型提供最大的靈活性。 特色：採用flex佈局的元素成爲flex容器，他的全部子元素自動成爲容器的成員。 借用騰訊雲社區的一張圖

由圖中咱們能夠看出flex佈局實際上是將咱們的 元素當作一個一左上角爲原點的 直角座標系。

如何使用flex佈局

• 主軸（flex佈局以主軸和交叉軸爲主的。理解他們是掌握flex佈局的基礎。）

  主軸由flex-direction定義他能夠去四個值：row row-reverse column column-reverse

  1. row 或者 row-reverse，你的主軸將沿着 inline 方向延伸。
  2. column 或者 column-reverse，你的主軸會沿着上下方向延伸,及block方式。
  3. 交叉軸垂直於主軸，因此若是你的flex-direction (主軸) 設成了 row row-reverse則交叉軸爲垂直方向
  4. 若是flex-direction (主軸) 設成了 column column-reverse則交叉軸爲水平方向。

• 按需固定元素位置（容器內元素屬性設置）

  1. justify-content - 控制主軸上全部 flex 項目的對齊（相比margin auto要方便的多）。
  2. align-items - 控制交叉軸上全部 flex 項目的對齊（有了這個屬性不用再考慮父元素有多高top是多少了）。
  3. align-self - 控制交叉軸上的單個 flex 項目的對齊。
  4. align-content - 控制「多條主軸」的 flex 項目在交叉軸的對齊（要使得 align-content 生效，flex 容器的height要大於 flex 項目的可視內容。而後它會將全部的 flex 項目打包成一塊以後再對齊剩下的空間）。

• 應對頁面彈性伸縮（容器內元素屬性設置）

  1. flex-shrink/grow: 比例縮小/放大

     flex-grow:flex-grow屬性默認等於0，即便用原本的寬度，不拉伸。等於1時，就表示該項目寬度拉伸，佔據當前行的全部剩餘寬度。

     flex-shrink:flex-shrink的默認值爲1，當父元素的寬度小於全部子元素的寬度的和時，子元素的寬度會減少。值越大，減少的越厲害。若是值爲0，表示不減少。

  2. flex-basis（初始值：auto）:指定了item在flex佈局中的初始大小（前提是不改變盒模型的box-sizing），所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。另外其設置的優先級高於width。

• flex 屬性總結（這裏只作簡要說明，詳細請查看mdn文檔）

  1. 容器屬性 flex-flow:屬性是flex-direction屬性和flex-wrap屬性的簡寫形式

     flex-direction:屬性決定主軸的方向

     flex-wrap:屬性決定軸線排不下，如何換行

     justify-content:屬性決定項目在主軸上的對齊方式

     align-items:屬性決定項目在交叉軸上的對齊方式

     align-content:屬性定義了多根軸線的對齊方式（一條軸線時不起做用）

  2. 項目的屬性

     order:定義項目的排列項目

     flex-grow:定義項目的放大

     flex-shrink:定義項目的縮小

     flex-basis:定義項目的基本大小

     flex:屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。

     align-self:單個項目定義的屬性，可覆蓋align-items屬性。

爲何要使用flex佈局

1. flex佈局的思想簡單明瞭初學者很容易上手
2. 他能夠很好的適應多端佈局（響應各類頁面）
3. 爲盒狀模型提供最大的靈活性

總結

隨着當前電子產品的快速發展，適應各類設備的顯示已成爲咱們前端開發者必備的技能。5-10年前咱們只用考慮幾種的設備適配，到現在的十幾種細分來講甚至幾十種，這就須要咱們掌握一種能夠輕鬆實現頁面響應式佈局的技能，而flex即可以知足咱們當前的需求。

注意：

Internet Explorer 10： 使用-ms-前綴；

UC瀏覽器： 使用-webkit-前綴。

如今，IE11 已經支持display: flex，可是在使用的時候會有一些bug。