Flexbox的佈局是一個用於頁面佈局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列)，並且讓這些列表能延伸到佔用可用的空間。較爲複雜的佈局可以通過嵌套一個伸縮容器(flex container)來輔助實現。 Flexbox可以簡單快速的創建一個具有彈性功能的佈局，當在一個小屏幕上顯示的時候，Flexbox可以讓元素在容器(伸縮容器)中進行自由擴展和收縮，從而容易調整整個佈局。它的目的是使用常見的佈局模式，比如說三列布局，可以非常簡單的實現。
看看一些例子來了解Flexbox擅長哪種東西。
伸縮容器(flex containers)和伸縮項目(flex items)
一個Flexbox佈局是由一個伸縮容器(flex containers)和在這個容器裏的伸縮項目(flex items)組成。
伸縮容器(flex containers)是一個HTML標籤元素，並且“display”屬性顯式的設置了“flex”屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目(flex items)。
這有一個三列布局的例子。外面的div容器是一個伸縮容器，而裏面的left、main和right三個div都是伸縮項目：
設置一個簡單的伸縮容器很容易，代碼如下：
.container { display: flex;} 伸縮方向與換行(flex-flow)
伸縮容器有一個CSS屬性“flex-flow”用來決定伸縮項目的佈局方式。如果伸縮容器設置了“flex-flow”值爲“row”，伸縮項目排列由左向右排列：
如果“flex-flow”值設置爲“column”，伸縮項目排列由上至下排列：
這裏將展處樣設置伸縮容器，使用伸縮項目在一行中顯示：
.container { display: flex; flex-flow: row;} 一個伸縮容器中的所有伸縮項目既可以排列在單行也可以多行排列。這個主要由“flex-flow”是否設置爲“wrap”來決定。如果伸縮容器設置了“wrap”屬性值，當伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列。
這裏展示瞭如何將伸縮容器設置爲“wrap”:
.container { display: flex; flex-flow: row wrap;} 伸縮項目(flex
items)
在伸縮容器中的所有子元素都將自動變成伸縮項目。沒有額外配置CSS的必要。你唯一需要的做的就是設置伸縮項目的尺寸。
如果伸縮容器把“flex-flow”設置爲“row”後，伸縮項目將需要設置他們的寬度。伸縮項目的高度將會自動設置爲伸縮容器的高度：
如果伸縮容器把“flex-flow”設置爲“column”後，伸縮項目將需要設置他們的高度，伸縮項目的寬度將會自動設置爲伸縮容器的寬度：
給伸縮項目設置“width”和“height”屬性來定義伸縮項目尺寸，而這個伸縮項目是獨立於其他伸縮項目。例如，如果我們給主內容(content)設置了一個600px的寬度，不管伸縮容器中有一個、兩個或者上百個伸縮項目，主內容的寬度都是600px。
如果你想伸縮項目根據伸縮容器剩餘的空間來決定伸縮項目的寬度，你可以使用“flex”屬性。例如，我們可以告訴瀏覽器，左邊欄和右邊欄佔用了伸縮容器減去主內容寬度的空間。
flex的值於對應的空間成正比。如果左邊欄設置了值爲“1”和右邊欄設置了值爲“2”，伸縮容器剩餘的空間將按比例分配給左邊欄和右邊欄，並且右邊欄所佔的空間是左邊欄的兩倍：
下面是示例中運用在伸縮項目上的一些代碼，展示了獨立寬度和按比例計算的寬度：
.main { width: 600px;}.left { flex: 1;}.right { flex: 2;} 完整的實例
這是一個很簡單的實例，Flexbox創建了一個經典的三列布局。主內容寬度爲60%，而邊欄是使用“flex”屬性，按比例自動根據伸縮容器剩餘空間計算得到對應的寬度：
HTML結構
… … …
CSS代碼
.container { display: flex; flex-flow: row;}.main { width: 60%;}.left { flex: 1;}.right { flex: 2;} 示例效果
瀏覽器支持
在2012年寫作時，瀏覽器支持定案(最新版本)語法並不是很好。這個例子可以在Opera和webkit內容的Chrome下運行很好(webkit下需要添加前綴-webkit)。
在我的文章示例代碼中沒有寫上瀏覽器的前綴，主要是讓大家更好的理解。在2013年03月前爲了更廣泛的支持瀏覽器，你需要添加webkit內核和ie瀏覽器的前綴。你也可能需要考慮添加支持flexbox的老語法版本。我個人認爲可以先學習flexbox的使用，在實際項目中推遲使用，直到最終的語法得到更多瀏覽器的支持。
也可參照另一篇文章：http://www.cnblogs.com/lilyimage/p/3682810.html