|
來源：Robert’s talk
原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/
Web布局一直個是難點，但貌似現(xiàn)在我們有更好的選擇了。
背景
首先,我們有表格布局。當不考慮語義并且利用一些適當?shù)那短缀推渌记?我們可以用table建立具有一定功能的布局。
然后是現(xiàn)在大多數(shù)人都在使用的浮動布局。我們可以使用任何我們想用的元素,但浮動并不適用于初學者。表面上它看起來很基礎,但背后復雜的功能可以使經驗豐富的開發(fā)者看著自己的屏幕不知所措。另外,浮動布局有一個缺點就是需要通過額外的元素清除浮動,或者更好一點,可以清除CSS浮動而不添加額外的標簽。
這些缺點使得浮動布局不是很容易掌握，因為沒有一個默認的方法可以建立起浮動與元素之間的關系，所以我們還需要更多的方法來實現(xiàn)多欄等高布局。
然后有些人開始使用display: table,display: table-cell等,但由于直到IE8 Internet Explorer瀏覽器才支持,人們似乎放棄了而只是接受float作為實際解決方案。
介紹彈性盒模型布局模塊(aka Flex Box)
有一個隱藏的利器,就是大多數(shù)人似乎已經忽視的彈性盒模型布局模塊。它提供了:
- 等高的欄目。
- 獨立的元素順序。
- 指定元素之間的關系。
- 靈活的尺寸和對齊方式。
一個簡單的例子
當我們想要顯示一個三欄布局，我們會這樣做:
<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屬性的值是指父容器中除了子容器以外的剩余空間如何被子容器分割,就像佐伊評論的,數(shù)字越大分到的越多。這也意味著每個元素的padding不會額外增加它的寬度(不錯吧?)。
出處：網易用戶體驗設計中心
責任編輯：bluehearts
上一頁 下一頁 CSS3彈性盒模型布局模塊介紹 [2]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS3彈性盒模型布局模塊介紹 [1]
第 2 頁 
