來源：Robert’s talk
原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

Web布局一直個是難點，但貌似現在我們有更好的選擇了。

背景

首先,我們有表格布局。當不考慮語義并且利用一些適當的嵌套和其他技巧,我們可以用table建立具有一定功能的布局。

然后是現在大多數人都在使用的浮動布局。我們可以使用任何我們想用的元素,但浮動并不適用于初學者。表面上它看起來很基礎,但背后復雜的功能可以使經驗豐富的開發者看著自己的屏幕不知所措。另外,浮動布局有一個缺點就是需要通過額外的元素清除浮動,或者更好一點,可以清除CSS浮動而不添加額外的標簽。

這些缺點使得浮動布局不是很容易掌握，因為沒有一個默認的方法可以建立起浮動與元素之間的關系，所以我們還需要更多的方法來實現多欄等高布局。

然后有些人開始使用display: table,display: table-cell等,但由于直到IE8 Internet Explorer瀏覽器才支持,人們似乎放棄了而只是接受float作為實際解決方案。

介紹彈性盒模型布局模塊(aka Flex Box)

有一個隱藏的利器,就是大多數人似乎已經忽視的彈性盒模型布局模塊。它提供了:

• 等高的欄目。
• 獨立的元素順序。
• 指定元素之間的關系。
• 靈活的尺寸和對齊方式。

一個簡單的例子

當我們想要顯示一個三欄布局，我們會這樣做:

?

<div class="flex-container">
??? <div class="col-1">I am column 1</div>
??? <div class="col-2">I am column 2</div>
??? <div class="col-3">I am column 3</div>
</div>

?

.flex-container {
??? display: -moz-box;
??? display: -webkit-box;
??? display: box;
??? -moz-box-orient: horizontal;
??? -webkit-box-orient: horizontal;
??? box-orient: horizontal;
}

我們使用display屬性把容器元素設為 box,然后我們用box-orient屬性,將它設置水平(你也可以使用vertical設為垂直)。

用這個方法,直接子元素(如<div class=”col-1″>等)將被一個接一個水平放置,它們的寬度由它們的內容決定。但是如果我們想用自適應的方法讓它們擴展到整個容器元素的寬度該怎么辦呢?那么我們就需要為它們設置box-flex:

?

.col-1 {
??? -moz-box-flex: 1;
??? -webkit-box-flex: 1;
??? box-flex: 1;
}
.col-2 {
??? -moz-box-flex: 1;
??? -webkit-box-flex: 1;
??? box-flex: 1;
}
.col-3 {
??? -moz-box-flex: 2;
??? -webkit-box-flex: 2;
??? box-flex: 2;

}

box-flex屬性的值是指父容器中除了子容器以外的剩余空間如何被子容器分割,就像佐伊評論的,數字越大分到的越多。這也意味著每個元素的padding不會額外增加它的寬度(不錯吧?)。

設置呈現順序

我們有兩種方法設置呈現順序,可以通過設置容器元素(即設置display: box的元素)的box-direction屬性,或者我們可以用box-ordinal-group給每一個列/子元素設置一個數字來表示它們的呈現順序(有趣的是,這個屬性在火狐中會使元素右對齊，而谷歌Chrome和Safari是左對齊):

?

.flex-container-reverse {
??? display: -moz-box;
??? display: -webkit-box;
??? display: box;
??? -moz-box-orient: horizontal;
??? -webkit-box-orient: horizontal;
??? box-orient: horizontal;
??? -moz-box-direction: reverse;
??? -webkit-box-direction: reverse;
??? box-direction: reverse;
}

表示反向呈現,或:

?

.col-1 {
??? -moz-box-ordinal-group: 2;
??? -webkit-box-ordinal-group: 2;
??? box-ordinal-group: 2;
}

.col-2 {
??? -moz-box-ordinal-group: 3;
??? -webkit-box-ordinal-group: 3;
??? box-ordinal-group: 3;
}

.col-3 {
??? -moz-box-ordinal-group: 1;
??? -webkit-box-ordinal-group: 1;
??? box-ordinal-group: 1;
}

表示col-3是第一個,然后是col-1，最后是col-2。

居中對齊和兩端對齊

還有一個屬性,box-pack,可以它來規定盒子的呈現方式,例如居中，兩端對齊等。這個例子使三個元素在它們的父元素內居中(有趣的是,之前設置的padding消失了):

?

.flex-container-center {
??? display: -moz-box;
??? display: -webkit-box;
??? -moz-box-orient: horizontal;
??? -webkit-box-orient: horizontal;
??? box-orient: horizontal;
??? -moz-box-pack: center;
??? -webkit-box-pack: center;
??? box-pack: center;
}

我們也可以讓這三個元素在父元素內兩端對齊：

?

.flex-container-justify {
??? display: -moz-box;
??? display: -webkit-box;
??? display: box;
??? -moz-box-orient: horizontal;
??? -webkit-box-orient: horizontal;
??? box-orient: horizontal;
??? -moz-box-pack: justify;
??? -webkit-box-pack: justify;
??? box-pack: justify;
}

然而,兩端對齊貌似只在WebKit內核瀏覽器中有效(谷歌Chrome和Safari)。

彈性盒模型布局demo

我加入了一些CSS3彈性盒模型布局實例和測試用例到我還在不斷完善中的CSS3測試套件,你可以用自己的瀏覽器看看這些例子,也可以修改代碼看看會發生什么。

瀏覽器支持

• Firefox 3.0+
• Google Chrome 5.0+
• Safari 3.2+
• iOS 3.2+ (Mobile Safari)
• Android 2.2+

這已經是相當好的瀏覽器支持,但不幸的是,目前仍然沒有發現Internet Explorer 9測試版或Opera 11測試版將要支持彈性盒模型布局的痕跡,但我希望它們可以跟上,因為我們真的需要一個替代方案來在web上創建布局。

相關閱讀

· Mozilla hacks: The CSS 3 Flexible Box Model
· Future of CSS: The Flexible Box Model

總結

以上是生活随笔為你收集整理的CSS3弹性盒模型布局模块介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。