Flexbox 自由的佈局

css3提出了一種新的佈局方式.她並無以摧枯拉朽之勢博得個人喜好.我和她的故事老是伴隨着苦澀的味道.世道變了,總要作出些選擇才能跟緊步伐.她很強大,能知足你天馬行空的需求而沒必要抓掉一大把頭髮.她卻很複雜,屬性之多讓我屢次在門外觀望.一回生,二回熟.來往多了,竟也混熟了. 原來了解其核心思想和原理即可撥開雲霧見明月.

之前都是用float + position 來定位佈局.用過float的都知道,會涉及到清除浮動的問題以及BFC(塊級格式化上下文),容易出現問題開發也麻煩.後來使用inline-block 佈局規避掉清除浮動的問題,還能自適應內容寬度. 還能經過vertical-align:middle 來解決垂直居中的問題,可是移動開發的大潮來襲,inline-block對響應式佈局上終究顯得力不從心.伸縮盒模型應運而生,能輕鬆的解決諸如垂直居中,自適應,拉伸,響應式等等問題.讓開發者從各類hack和多版本開發的重複勞動中解脫. 我我的認爲這是很是有意義的.爲了有一個直觀的理解,我們來看一些常見的佈局,用flexbox是怎麼作的:

 

1.  幾個div水平排列,相似inline-block的效果

 可見只須要在父容器上設定一個display:flex 即可實現該效果,很是簡單.

 

2.  垂直居中

 

3.  2欄自適應佈局

4.  聖盃佈局

 

Flexbox--彈性盒模型

彈性盒子模型的出現是爲了知足當今各類設備尺寸的自適應問題.它規定了一系列語法來表述項目如何在一個彈性盒子模型中自適應排列.這個盒子相對於其餘元素是獨立的,能夠把它當作一個block元素,也能夠是inline元素.它的語法能夠分紅2部分來看:

 

對於彈性盒子的描述

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

 

對於盒子中元素的描述

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 

 

按術語分類

flexbox的屬性比較多,咱們須要配合它的基本設計概念來輔助記憶.根據上圖,咱們按術語進行分類:

 

• 彈性容器(Flex container)　　

　　　包含着彈性項目的父元素。經過設置 display 屬性的值爲 flex 或 inline-flex 來定義彈性容器。

• 彈性項目(Flex item)

  彈性容器的每一個子元素都成爲彈性項目。彈性容器直接包含的文本將包覆成匿名彈性項目。

• 軸(Axis)

  每一個彈性框佈局包含兩個軸。彈性項目沿其依次排列的那根軸稱爲主軸(main axis)。垂直於主軸的那根軸稱爲側軸(cross axis)。

  • flex-direction 屬性確立主軸。
  • justify-content 屬性定義了在當前行上彈性項目沿主軸如何排布。
  • align-items 屬性定義了在當前行上彈性項目沿側軸默認如何排布。
  • align-content 屬性定義了在多行上彈性項目沿側軸默認如何排布.
  • align-self 屬性定義了單個彈性項目在側軸上應當如何對齊，這個定義覆蓋由align-items 所確立的默認值。

• 方位(Direction)

  彈性容器的各個邊（主軸起點(main start)/主軸終點(main end)和側軸起點(cross start)/側軸終點(cross end)）描述了彈性條目流的起點與終點。它們具體取決於彈性容器的主軸與側軸以及由 writing-mode 確立的方向（從左到右、從右到左，等等）。

  • order 屬性將元素與序號組關聯起來，並決定哪些元素先出現。
  • flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的簡寫，決定彈性項目如何排布。　　　　　

• 行(Line)

  根據 flex-wrap 屬性，彈性項目能夠排布在單個行或者多個行中。此屬性控制側軸的方向和新行排列的方向。

• 尺寸(Dimension)

  根據彈性容器的主軸與側軸，彈性項目的寬和高相應稱爲主軸尺寸(main size) 與 側軸尺寸(cross size)。

  • min-height 與 min-width 屬性初始值爲 0。
  • flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫，確立彈性項目的伸縮性。

  

新舊語法對比

 

瞭解概念是學習一個東西的基石.但是要完成一個東西,經驗是最寶貴的.學習的目的就是去使用,提升效率.紙上談兵毫無心義.因爲伸縮盒的規範經歷了好幾回大版本的修改,形成多個版本共同存在.

 

    2009年7月 工做草案 (display: box;)　　https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
    2011年3月 工做草案 (display: flexbox;)
    2011年11月 工做草案 (display: flexbox;)　https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
    2012年3月 工做草案 (display: flexbox;)
    2012年6月 工做草案 (display: flex;)

    2012年9月 候選推薦 (display: flex;)　　https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/

上圖列出了09年版和2012版的語法對比,11年的過渡語法版本就不說了. 目前就IE11支持.

因爲09年版語法對多行支持很差，所以你最好在一個flex容器內僅包含一行子元素。

 

跨瀏覽器兼容

 

比較有趣的是,09年版支持狀況很是好,除了ie.

兼容性方案的處理是,寫09年,和12年版本伸縮盒標準語法,以及相應的瀏覽器廠商前綴.跨瀏覽器寫法支持任意安卓和ios

 

09年版:

 12年版:

 

 

經驗tips

 

伸縮盒兼容

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

 

子元素按比例分配兼容

.page-item {
   width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
} 

 

其中的width屬性很是重要,你能夠設置任意值,但必需要有.若是不設,在某些瀏覽器上會出現沒法正確按設定的比例分配剩餘空間的狀況.

 

 

參考

• 伸縮盒新舊語法詳細查詢 flexbox
• 我我的比較推薦阮一峯的2篇文章Flex佈局-語法篇,Flex佈局-實例篇 . 看過以後基本就知道如何使用flexbox佈局了. 在此不作詳細探討.
• W3C制定標準流程:

  工做草案（Working Draft）最終公示（Last Call）候選推薦標準（Candidate Recommendation）提名推薦標準（Proposed Recommendation）推薦標準（Recommendation）