CSS3伸縮盒Flexible Box

這是一種全新的佈局，在移動端很是實用，IE對此佈局的相關的兼容不是很好，Firefox、Chrome、Safrai等須要加瀏覽器前綴。

先說說這種佈局的特色：

1）移動端因爲屏幕寬度都不同，在佈局的時候爲了適配，若是用百分比，就得精確計算，並且若是有1px邊框，計算會更加複雜難控制

2）若是有多列，要讓全部列的高度同樣，之前的話須要用各類計算或用子元素撐高等

3）上下居中，若是是在之前，那麼用line-height或top絕對定位等計算

4）表單佈局的時候，常常是左邊和右邊在一行上，以往是設置float或position與margin-left組合佈局

5）網頁有時候要有個底部，放些聯繫方式友情連接等，這個底部應該永遠在下面，即便中間沒內容，也不要移上來，以往的話是給中間賦個高等

而如今，用Flexible Box的幾個屬性就能完成上面的高難度動做。

有一個在線的flexbox小遊戲能夠玩耍一下，叫作flexboxfroggy。規則很簡單，就是將顏色對應的青蛙跟荷葉合在一塊兒。

1、新舊語法

1）幾個基礎概念

1. flex container（彈性容器），主要設置display爲flex或-webkit-flex，那麼這個容器中的子元素就是彈性的。

2. flex item（彈性子元素），尺寸可經過普通的width或height，或者使用高級的flex屬性，自定義分配空間設置尺寸。

3. main axis（主軸或橫軸）和cross axis（側軸或縱軸），其中屬性flex-direction、justify-content、align-items、align-self控制着軸的方向或對齊方式。

4. flex-wrap屬性能夠控制彈性子元素的換行。

5. 有個order屬性，用整數值來定義排列順序，數值小的排在前面。

 

2）新舊屬性對比

舊語法	新語法

舊版部分屬性兼容性：

新版部分屬性兼容性：

 

3）新舊屬性對應

舊屬性	新屬性	定義或對比
box-orient box-direction	flex-direction	box-orient:horizontal + box-direction:normal = flex-direction:row box-orient:horizontal + box-direction:reverse = flex-direction:row-reverse box-orient:vertical + box-direction:normal = flex-direction:column box-orient:horizontal + box-direction:reverse = flex-direction:column-reverse
box-flex	flex	flex有3個子屬性，而box-flex只能設置一個數字
box-align	align-items align-content	下面會分析align-items和align-content的區別
box-pack	justify-content	效果相同
box-ordinal-group	order	效果相同
box-lines （實驗屬性）	flex-wrap	效果相同（Android的UC和微信瀏覽器沒有換行效果）
box-flex-group		設置或檢索伸縮盒對象的子元素的所屬組
	flex-grow	flex子屬性，設置或檢索彈性盒的擴展比率
	flex-shrink	flex子屬性，設置或檢索彈性盒的收縮比率
	flex-basis	flex子屬性，設置或檢索彈性盒伸縮基準值
	flex-flow	flex-direction與flex-wrap的複合屬性，設置或檢索彈性盒模型對象的子元素排列方式
	align-self	定義flex子項單獨在側軸（縱軸）方向上的對齊方式

 

4）align-content與align-items的區別

先看下面的對比圖片，左邊是align-content，右邊是align-items（在線代碼請點擊這裏，用Chrome打開）

align-content只有在多行的時候纔會出現效果，若是隻有一行就不會有效果，能夠修改在線的代碼看效果。此屬性與在主軸上對齊方式的justify-content屬性相似（Android上的UC和微信瀏覽器不顯示flex-wrap效果）

align-items在多行的時候，兩列不是被當成了一個總體，但在一行的時候，效果很好。align-self修改的是父級align-items的效果。

 

5）子元素空間計算方式

新語法flex，裏面包括flex-grow擴展比率、flex-shrink收縮比率和flex-basis起始數值。這兩個屬性的兼容性不是很好，UC瀏覽器就不能使用。

分兩種狀況：

1. 容器的寬度 > 子元素寬度總和，查看在線源碼。

容器的寬度設置爲500px，flex-basis子元素起始寬度分別50px、80px、100px。

.flex li:nth-child(1) {
  flex: 1 1 50px;
  background:red;
}

.flex li:nth-child(2) {
  flex: 2 2 80px;
  background:blue;
}

.flex li:nth-child(3) {
  flex: 3 3 100px;
  background:black;
}

先算出剩餘空間爲270px，用flex-grow來計算。

最終寬度 = flex-grow / flex-grow總和 * 剩餘空間 + flex-basis

子元素1 = (1 / (1+2+3)) * 270 + 50= 95

子元素2 = (2 / (1+2+3)) * 270 + 80= 170

子元素3 = (3 / (1+2+3)) * 270 + 100= 235

2. 容器的寬度 < 子元素寬度總和，查看在線源碼。

容器的寬度設置爲110px，flex-basis子元素的屬性和上面相同。

先算出溢出值120px，再根據收縮比率，計算出收縮總和 1*50 + 2*80 + 3*100 = 510px。

最終寬度 ≈ flex-basis - (收縮比率 * flex-basis) / 收縮總和 * 溢出值

子元素1 = 50 - (1*50 / 510) * 120 ≈ 38.23

子元素2 = 80 - (2*80 / 510) * 120 ≈ 42.35

子元素3 = 100 - (3*100 / 510) * 120 ≈ 29.40

 

6）主軸與側軸

這兩個軸看上去像X、Y座標，可是有一點不一樣的就是XY位置是不會變的，X座標軸不會變成Y座標軸。

經過 flex-direction 或 box-orient 設置排列方式後，主軸和側軸的位置也會變了。以下圖所示：

在作 justify-content 或 align-items 對齊的時候，要注意參照的軸的位置。

例如我想作個垂直居中的操做，我會設置 align-items:center，在上圖中的第一個主軸和側軸中，能夠作到想要的效果。

可是在第二個主軸和側軸中就會顯示水平居中的效果，由於 align-items 是根據側軸（Cross axis）來對齊的。

 

7）-webkit-box 與 flex 略有不一樣

網上不少地方僅僅說這兩個只是語法上面的不一樣，但在實際項目中，碰到過只能用-webkit-box才能達到本身想要的效果。

例如我要在flex佈局中實現超出的文本顯示省略號，查看在線代碼。-webkit-line-clamp這個屬性就必需要和-webkit-box結合使用.

.flex {
  width: 200px;
  display: -webkit-box;
  /*display: flex;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;/*限制在一個塊元素顯示的文本的行數*/
  overflow: hidden;
  text-overflow: ellipsis;
}

應該還有其餘的不一樣點，我還沒發現。

 

3、實際應用

1）簡單的網格系統

bootstrap2.3.2中有個柵格系統，經過百分比或px與float結合產生柵格效果，而且是響應式的，CSS代碼要300多行。

flex佈局原本就是響應式的，這樣會省掉很多代碼，查看在線代碼。

 

2）多列等高

等高的問題在國外叫《Holy Grail Layout》，名稱挺高大上的，內容一大堆。

關於等高的技巧，有不少種，能夠查看這篇《八種建立等高列布局》，方法各有優缺點，不管哪一種但實現起來都須要些代碼。

而flex佈局，設置display=flex，各個子元素再個設置空間，他們的高度可以自動調整到相同，查看在線源碼。

 

3）絕對底部

在網頁上面，有時候底部那欄須要一直貼在下面，例如友情連接這些信息，而若是中間內容沒有，就會塌陷上去。

下圖中就是在沒有內容的時候上來了，雖然能夠在內容區域默認設置個高度，可是底部不會正正好貼到屏幕的最下面，除非精確計算。

國外管這個叫《Sticky Footer》

flex佈局中只要設置下flex-direction: column方向，再設置下容器的高度與屏幕同樣或更高，這樣底部的子元素就會一直貼在下面。

查看在線代碼。更多的信息能夠參考《Solved by Flexbox》，Github地址在這裏。還有個flexbugs能夠參考參考。

 

4、注意點

1）多列布局中的column-*屬性對彈性子元素無效，這也是一種彈性佈局，可是有效的場景比較簡單

例如瀑布式照片牆（下圖所示），須要彈性的內容只有一個img標籤

2）曾經有一個場景（下圖所示），Flex佈局可以等高，可是當用::after設置了個鉤後，會出現::after內容的高度仍是原先的，致使了錯位。

具體內容能夠點擊這裏查看。

3）float 和 clear 對彈性子元素無效。

4）vertical-align 對彈性子元素的對齊無效