《轉載》使用CSS3 Flexbox布局

標籤：

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都是伸縮項目：

設定一個簡單的伸縮容器很容易，代碼如下：

<div class="container"></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結構

<div class="container">  <nav class="nav left">…</nav>   <section class="main">    …  </section>   <nav class="nav right">…</nav></div>    

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.w3cplus.com/css3/css3-flexbox-layout.html

 

《轉載》使用CSS3 Flexbox布局