使用 CSS3 Flexible Boxes 佈局

本博客同步自個人Github博客

Flexible Box是什麼？Flexible意爲可伸縮的，Box意爲盒子，能夠理解爲一種新式的盒模型——伸縮盒模型。由CSS3規範提出，這是在原有的你們很是熟悉的block, inline-block, inline的基礎上延伸出的新一代佈局模式。

瀏覽器兼容性

做爲很是現實的開發者，是否對一個新技術進行關注，首先要考慮它的瀏覽器兼容性如何。咱們的伸縮盒模型的瀏覽器兼容性看起來仍是至關不錯的。

能夠看到，現代瀏覽器基本上都支持了，IE10開始也支持了（IE和Safari分別加-ms-和-webkit-前綴便可），移動端的支持狀況也比較良好，惟一不支持的平臺只有Opera了，咱不帶他玩→_→

所以，奧巴馬同志說：伸縮盒模型是好的，有前途的。（嗯嗯~）

伸縮盒基本概念

伸縮盒的最大特色或者說優勢就在於它考慮到了現今高昂的房價和人民日益增加的住宅需求之間的矛盾，房屋面積是有限的，可是咱們的伸縮盒可以最合理最高效地把房子分給你們。面積多了，就給你們夥多分點；面積小了，就讓各位擠一擠少分點，總而言之不會讓任何一我的露宿街頭的（overflow）！

既然咱們提到了房子和住戶的關係，那麼住戶的排列天然須要沿必定的方向。對於塊級元素來講，佈局的延伸方向是自上而下的，也就是縱向。而對於行內元素來講，佈局延伸方向是自左往右的，也就是橫向。而伸縮盒呢，它的方向是可變的，既能縱向延伸，也能橫向舒展，這取決於你的設置了。

伸縮盒模型基本術語

伸縮盒模型的思想和普通的塊級元素和行內元素的佈局思想有較大的不一樣，它引入了一些新的概念和術語，經過下面這張圖來了解一下：

Flex container 伸縮盒容器
這就是用來分的房子，這是一間神奇的房子，要讓它變得神奇，將display屬性聲明爲flex或inline-flex便可~

Flex item 伸縮項
房子裏的居民，他們都會佔有本身應得的住房面積。

爲了形象說明，咱們用代碼來解釋。

<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

CSS設置爲：

.container {
  display: flex;
  width: 300px;
  height: 100px;
  ...
}

在這裏display: inline-flex;好像也能夠。
對於其中的伸縮項元素，咱們須要給他們事先安排好住房面積比例，咱們就用最簡單最健康的1:1:1吧~咱們將比例聲明在flex屬性裏

.item-1 {
  flex: 1;
  ...
}
.item-2 {
  flex: 1;
  ...
}
.item-3 {
  flex: 1;
  ...
}

Voilà!

咱們的大房子被完美地平分紅三個隔間了，三家平分房租！

若是有人想住大點的房子，咱們直接改變flex的比例便可：

.item-1 {
  flex: 1;
  ...
}
.item-2 {
  flex: 1;
  ...
}
.item-3 {
  flex: 2;
  ...
}

是否是很方便？

Axes 軸
咱們能夠看到，圖中有兩條軸，分別標註了主軸和次軸（垂直於主軸）。然而實際上哪一條是主軸並不肯定，是由咱們來規定的。

1. flex-direction 此屬性規定哪條軸爲主軸。
2. justify-content 此屬性設置了伸縮項在主軸方向上的排列方式，這個稍後解釋。
3. align-items 此屬性和上面的justify-content相對，表示伸縮項在次軸上的排列方式。
4. align-self 此屬性規定某一個特定的伸縮項元素在次軸上的佈局方式，在某個元素上設置該屬性會覆蓋它的align-items屬性。也就是這個屬性會讓某個元素更有個性，不走尋常路~

flex-direction
當咱們不想沿着默認的方向分房子的時候，咱們能夠改變flex-direction屬性的值來改變主軸和方向，該屬性默認的取值爲row；

.container {
  flex: row-reverse;
  ...
}

顧名思義，這會讓伸縮項的排列方向反過來：

當此屬性設置爲column時，主次軸就會對調，元素的排列方向也會隨之改變：

.container {
  flex-direction: column;
  ...
}

至於flex: column-reverse的含義就不用我多說了吧~

justify-contents
有的時候，你們挨着住，一點空隙都沒有也會很難受，連個過道都沒有，隱私也不能保證對吧。這個時候，咱們能夠改變分配政策了，再也不按比例分配，而是定額分配，每一個人的面積是肯定的。多出的房屋面積改爲公共區域。

.item {
  width: 80px;
  ...
}
...

設定了width屬性後也要記得去掉flex屬性的聲明哦，否則flex屬性的效果仍然會把width覆蓋掉~
同時，若是width屬性也不設定的話，元素寬度會表現爲內容的寬度，which means 當伸縮項內部無內容時，將不會進行渲染，其表現就和display: none;同樣。
這時，在容器上聲明justify-content屬性就能夠安排伸縮項的位置了：

.content {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
這項屬性會改變次軸上元素排列的方式，對於本例來講原來次軸方向上元素的高度是表現爲height: 100%;的，設定了align-items屬性後，其高度表現就會發生改變了。

.content {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

說到這裏了，伸縮項具體的表現其實能夠想象出來了，想象不出來的就本身動手試一試吧~

order
在伸縮項上聲明此屬性，能夠無視HTML結構的順序而按照order從小到大的順序沿flex-direction方向排列。好比：

.item-1 {
  order: 3;
  ...
}
.item-2 {
  order: 1;
  ...
}
.item-3 {
  order: 2;
  ...
}

flex-wrap
此屬性的默認值爲nowrap，也就是忽略伸縮項的寬度，管你要多少住房面積，統統按照flex屬性說好的分配，不準換行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse
}

.item {
  width: 150px;
}

flex-grow，flex-shrink 和 flex-basis
上文提到的flex屬性其實是這三個屬性的簡寫形式。這三個屬性有類似性，都是表示項與項之間分配空間的相對比例關係，不一樣之處在於：

1. flex-grow屬性：屬性值爲該伸縮項所佔空間相對於其餘伸縮項（聲明瞭flex相關屬性的項）的比值。
2. flex-shrink屬性：該伸縮項相對於其餘伸縮項縮小的比值，也就是說當flex-shrink: 3;時，該項所佔空間爲其餘項的1/3。
3. flex-basis屬性：屬性值爲該項所佔空間佔容器空間的百分比。

注意：對於flex-basis屬性，當全部項的屬性值相加<=100%時，會嚴格按照百分比值來渲染。當屬性值相加>100%時，元素並不會溢出，而是表現爲兩兩之間所佔空間大小遵循相互的百分比比值。也就是說當存在三個伸縮項且flex-basis值都爲50%時，表現行爲與三個項均爲flex: 1;同樣。

Flexible Boxes佈局模式在響應式開發中尤爲好用，對不一樣的終端，設置元素之間的空間分配關係將會變成一件很是簡單的事。伸縮盒佈局和響應式佈局中流行的流體佈局哪一種更好，仍是能夠結合起來，就看各位開發者發揮本身的聰明才智了！

PS: 最後感謝SF上一位網友52lidan提供的demo，各位能夠看他的jsfiddle，DEMO

參考文獻

1. http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
2. https://developer.mozilla.org/en-US/docs/Web/CSS/flex
3. http://www.zhangxinxu.com/wordpress/?p=1338