css彈性布局

轉自:http://www.blueidea.com/tech/web/2011/8693.asp

背景

首先,我們有表格版面配置。當不考慮語義並且利用一些適當的嵌套和其他技巧,我們可以用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不會額外增加它的寬度