《轉載》使用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