CSS3伸縮盒Flexible Box

標籤：chrome   android   檢索   對齊   pac   data-   應用   自動   nes   

這是一種全新的布局，在移動端非常實用，IE對此布局的相關的相容不是很好，Firefox、Chrome、Safrai等需要加瀏覽器首碼。

先說說這種布局的特點：

1）移動端由於螢幕寬度都不一樣，在布局的時候為了適配，如果用百分比，就得精確計算，而且如果有1px邊框，計算會更加複雜難控制

2）如果有多列，要讓所有列的高度一樣，以前的話需要用各種計算或用子項目撐高等

3）上下置中，如果是在以前，那麼用line-height或top絕對位置等計算

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

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

而現在，用Flexible Box的幾個屬性就能完成上面的高難度動作。

有一個線上的flexbox小遊戲可以玩耍一下，叫做flexboxfroggy。規則很簡單，就是將顏色對應的青蛙跟荷葉合在一起。

一、新舊文法

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;}

應該還有其他的不同點，我還沒發現。

 

三、實際應用

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可以參考參考。

 

四、注意點

1）多欄版面配置中的column-*屬性對彈性子項目無效，這也是一種彈性布局，但是有效情境比較簡單

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

2）曾經有一個情境（所示），Flex布局能夠等高，但是當用::after設定了個鉤後，會出現::after內容的高度還是原先的，導致了錯位。

具體內容可以點擊這裡查看。

3）float 和 clear 對彈性子項目無效。

4）vertical-align 對彈性子項目的對齊無效

 

CSS3伸縮盒Flexible Box