CSS3彈性盒模型flexbox布局基礎版

原文鏈接：http://caibaojian.com/using-flexbox.html

最近看了社區上的一些關於flexbox的很多文章，感覺都沒有我這篇文章實在，最重要的兼容性問題好多人都沒有提出解決方案。另外本人2014年5月還廢寢忘食的翻譯了國外的《CSS3彈性盒模型flexbox完整教程》和《CSS3彈性盒模型flexbox布局實例》，這么好的文章沒有人來發現，實在是遺憾。

文章寫作背景

查詢Can I use上的使用情況，發現最新的瀏覽器基本支持這個屬性，IE10開始支持，需要添加-ms前綴。

至於IE10之前的就不考慮了。彈性布局適合於移動前端開發，在Android和ios上也完美支持，所以搞移動的朋友非常有必要認識和使用了。這個屬性很久就看到了。一直在考慮到兼容性問題，沒有認真深入，后來又發現在現在現代瀏覽器中也會出現一些詭異的bug，所以又放棄了。

如果考慮到只處理移動方面的，那么兼容性就可以忽略了。

w3c上是這樣子定義的：box-flex的值為元素的可伸縮行。柔性是相對的，例如 box-flex 為 2 的子元素兩倍於 box-flex 為 1 的子元素。

文章寫作目的

Flexbox是一個相當優秀的屬性，它可能會成為未來版面布局的一部分。它的語法在過去的幾年里發生了很大的變化。但如果我們把舊的，新的和過渡的版本整合在一起，就可以實現更好的支持各種瀏覽器了。尤其適合簡單的，也是最常見使用例子：控制網格。

語法變化的地方

如果你搜索關於Flexbox的相關內容，你會發現許多過時的信息，讓我們來看看下面這幾種情況：

1. 第一種：display:box; 或者是一個屬性box-*;那么你看到的是2009年以前的Flexbox。
2. 第二種：display:flexbox，或者是一個函數flex()，那么你看到的是2011這個中間版本的Flexbox。
3. 第三種：display:flex，或者其他flex-*的屬性，那么你看到的是當前的規范（截止本文發表時間）。

過時的例子

1. Flexie - a javascript polyfill for Flexbox, uses old 2009 syntax.
2. This article by Richard 分享在 Smashing Magazine在2011過渡時間，但它更多的關注是2009以前的語法。
3. Stephen Hay寫了一系列關於Flexbox的文章，這篇文章介紹2009以前的語法，接着是另外一個2011的另外一篇，很不幸，一個月過后語法又更新了。

查看例子

 

綜合案例

最終的排版顯示會是下面這樣子的。

需要用到的CSS知識，display,box-flex,flex,box-ordinal-group,flex-order,order，這幾個都是css3的關於彈性盒子的新屬性。相關屬性將在下一篇文章詳細講解，敬請留意。

html代碼：

<div class="page-wrap">

  <section class="main-content" role="main">
    Main content: first in source order
  </section>

  <nav class="main-nav" role="navigation">
    Links
  </nav>

  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>

</div>

CSS代碼

//code from http://caibaojian.com/using-flexbox.html
.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+ */
 }
.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}

演示地址

瀏覽器支持

更多關於flexbox

1. CSS3彈性盒模型flexbox布局實例
2. CSS3彈性盒模型flexbox完整版教程

參考內容

http://css.doyoe.com/

http://css-tricks.com/using-flexbox/

http://www.w3school.com.cn/cssref/pr_box-flex.asp