平凡前端之路_10.彈性盒佈局

彈性盒子

CSS3 引入彈性盒子佈局決定一個盒子在其他盒子中的分佈方式以及如何處理可用的空間。

flex是flexible box的縮寫，意爲”彈性盒子”。

/* 任何一個容器都可以指定爲flex佈局 */
display: flex;

/* 行內元素也可以使用flex佈局 */
display: inline-flex;

/* 兼容與支持 */
display: -webkit-flex; 
display:         flex;

display: -webkit-inline-flex; 
display:         inline-flex;

當容器設爲flex佈局以後，子項目的float、clear和vertical-align屬性將失效。

---

flex 容器

採用flex佈局的元素，稱爲flex容器（flex container），簡稱”容器”。它的所有子元素自動成爲容器成員，稱爲flex項目（flex item），簡稱”項目”。

指定主軸方向 - flex-direction

flex-direction 指定flex容器主軸方向，交叉軸垂直於主軸。

flex-direction可能的值	描述
row（默認)	指定主軸爲水平方向，起點在左端。
row-reverse	指定主軸爲水平方向，起點在右端。
column	指定主軸爲垂直方向，起點在上沿。
column-reverse	指定主軸爲垂直方向，起點在下沿。

/* 兼容與支持 */
-webkit-flex-direction:  row;
        flex-direction:  row;

---

指定單行或者多行 - flex-wrap

flex-wrap 指定flex容器內單行或者多行。

flex-wrap可能的值	描述
nowrap （默認）	指定單行。
wrap	指定多行，第一行在最上方。在必要的時候拆行或拆列。
wrap-reverse	指定多行，第一行在最下方。在必要的時候拆行或拆列。

/* 兼容與支持 */
-webkit-flex-wrap:  wrap;
        flex-wrap:  wrap;

---

簡寫：主軸方向和單行或者多行 - flex-flow

flex-flow指定主軸方向和指定單行或者多行。

flex-flow是一個簡寫屬性，可在聲明中設置 flex-direction 和 flex-wrap 屬性。

-webkit-flex-flow: [-webkit-flex-direction] [-webkit-flex-wrap];
        flex-flow: [flex-direction] [flex-wrap];

---

指定主軸上的對齊方式 - justify-content

justify-content指定在主軸上的對齊方式。

justify-content可能的值	描述
flex-start （默認）	主軸開始方向對齊。
flex-end	主軸結束方向對齊。
center	中間對齊。
space-between	兩端對齊，項目之間的間隔都相等。
space-around	每個項目兩側的間隔相等。

/* 兼容與支持 */
-webkit-justify-content:  center;
        justify-content:  center;

---

指定項目在交叉軸上的對齊方式 - align-items

align-items指定項目在交叉軸上的對齊方式。

align-items可能的值	描述
stretch（默認）	佔滿整個交叉軸的高度。
flex-start	交叉軸的開始方向對齊。
flex-end	交叉軸的結束方向對齊。
center	交叉軸的中間對齊。
baseline	項目的第一行文字的基線對齊。

/* 兼容與支持 */
-webkit-align-items:  center;
        align-items:  center;

---

指定多根軸線的對齊方式 - align-content

align-content屬性指定了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

align-content可能的值	描述
stretch（默認值）	軸線佔滿整個交叉軸。
flex-start	與交叉軸的開始方向對齊。
flex-end	與交叉軸的結束方向對齊。
center	與交叉軸的中間對齊。
space-between	與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around	每根軸線兩側的間隔都相等。

/* 兼容與支持 */
-webkit-align-content:  center;
        align-content:  center;

---

flex 項目

項目的排列順序 - order

order屬性指定項目的排列順序。

order可能的值	描述
0（默認值）	指定義項目的排列順序。數值越小，排列越靠前。
number	指定義項目的排列順序。數值越小，排列越靠前。允許爲負值。

/* 兼容與支持 */
-webkit-order:  0;
        order:  0;

---

項目的伸縮基準值 - flex-basis

flex-basis指定在分配多餘空間之前，項目佔據的主軸空間大小，作爲項目的伸縮基準值。

flex-basis可能的值	描述
auto（默認值）	等於項目的長度。如果未指定長度，則將根據內容決定。
number	長度單位，指定項目的長度。
percent	百分比，指定項目長度佔容器的百分比值。

---

項目的擴展比率 - flex-grow

flex-grow屬性指定如果容器存在剩餘空間，項目分配容器剩餘空間的擴展比率。

flex-grow可能的值	描述
0（默認值）	如果容器存在剩餘空間，項目不放大。
number	當容器存在剩餘空間時，指定項目的放大比例，不允許爲負值。

/* 兼容與支持 */
-webkit-flex-grow:  0;
        flex-grow:  0;

當容器存在剩餘空間，所有項目的flex-grow之和小於1時，剩餘空間不會全部分配給各個項目，則項目分配容器剩餘空間的比例爲 x/1。

eg:
	/* 伸縮基準值 auto，取項目的長度 */
	.E { display: flex;  width: 900px; }
	.E>.F { height: 200px; }
	.E>.F.F1 { width: 300px; flex-grow: 0.1; } 
	.E>.F.F2 { width: 200px; flex-grow: 0.2; } 
	.E>.F.F3 { width: 100px; flex-grow: 0.3; } 
/* 
	flex-basis總和加起來爲600px，容器剩餘空間300px，
	
	項目分配容器剩餘空間的比例：
	vF1 = 0.1/1 = 0.1
	vF2 = 0.2/1 = 0.2
	vF3 = 0.3/1 = 0.3

	則項目分配容器剩餘空間爲：
	gF1 = 300 * vF1 = 30px
	gF2 = 300 * vF2 = 60px
	gF3 = 300 * vF3 = 90px
	
	項目擴展後佔據容器的空間爲：
	rF1 = 300 + 30 = 330px
	rF2 = 200 + 60 = 260px
	rF3 = 100 + 90 = 190px
	還有 300 - (30 + 60 + 90) = 120px沒有分配給任何項目。
 */

當容器存在剩餘空間，所有項目的flex-grow之和大於1時，剩餘空間全部分配給各個項目，則項目根據flex-grow 屬性值的比例分配容器所有剩餘空間。

eg:
	/* 伸縮基準值 auto，取項目的長度 */
	.E { display: flex;  width: 900px; }
	.E>.F { height: 200px; }
	.E>.F.F1 { width: 300px; flex-grow: 1; } 
	.E>.F.F2 { width: 200px; flex-grow: 2; } 
	.E>.F.F3 { width: 100px; flex-grow: 3; } 
/* 
	flex-basis總和加起來爲300px，容器剩餘空間300px，
	
	項目分配容器剩餘空間的比例：
	vF1 = 1/(1+2+3) = 1/6
	vF2 = 2/(1+2+3) = 1/3
	vF3 = 3/(1+2+3) = 1/2
	
	則項目分配容器剩餘空間爲：
	gF1 = 300 * vF1 = 50px
	gF2 = 200 * vF2 = 100px
	gF3 = 100 * vF3 = 150px
	
	項目佔據容器的空間爲：
	rF1 = 300 + gF1 = 350px
	rF2 = 200 + gF2 = 300px
	rF3 = 100 + gF3 = 250px
	剩餘空間全部分配給各個項目。
 */

---

項目的收縮比率 - flex-shrink

flex-shrink屬性指定如果容器空間不足，項目收縮以適應有限空間的比率。

flex-shrink可能的值	描述
1（默認值）	如果容器空間不足，該項目將縮小。
0	如果容器空間不足，項目不縮小。
number	不允許爲負值。

/* 兼容與支持 */
-webkit-flex-shrink:  0;
        flex-shrink:  0;

當容器空間不足，所有項目的flex-shrink之和小於1時，並不會收縮所有溢出空間，溢出空間收縮佔所有溢出空間比值爲flex-shrink之和的百分比值。

eg:
	/* 伸縮基準值 auto，取項目的長度 */
	.E { display: flex;  width: 300px; }
	.E>.F { height: 200px; }
	.E>.F.F1 { width: 300px; flex-shrink: 0.1; } 
	.E>.F.F2 { width: 200px; flex-shrink: 0.2; } 
	.E>.F.F3 { width: 100px; flex-shrink: 0.3; } 
/* 
	flex-basis總和加起來爲600px，容器溢出空間300px，溢出空間收縮 180 = 300 * (0.1+0.2+0.3)/1
	
	flex-basis加權總和爲 100 = 0.1*300 + 0.2*200 + 0.3*100 ，	
	項目權重佔比：
	vF1 = (0.1*300)/100 = 0.3
	vF2 = (0.2*200)/100 = 0.4
	vF3 = (0.3*100)/100 = 0.3
	
	則項目適應有限容器收縮空間爲：
	sF1 = 180 * vF1  = 54px
	sF2 = 180 * vF2  = 72px
	sF3 = 180 * vF3  = 54px
	
	項目佔據容器的空間爲：
	rF1 => 300 - sF1  = 246px
	rF2 => 200 - sF2  = 128px
	rF3 => 100 - sF3  = 46px
	還有 120 = 300 - 180 溢出空間沒有收縮。
 */

當容器空間不足，所有項目的flex-shrink之和大於1時，剩餘空間全部分配給各個項目，則項目根據flex-grow 屬性值的比例分配容器所有剩餘空間。

eg:
	/* 伸縮基準值 auto，取項目的長度 */
	.E { display: flex;  width: 300px; }
	.E>.F { height: 200px; }
	.E>.F.F1 { width: 300px; flex-shrink: 1; } 
	.E>.F.F2 { width: 200px; flex-shrink: 2; } 
	.E>.F.F3 { width: 100px; flex-shrink: 3; } 
/* 
	flex-basis總和爲600px，容器溢出空間 300px，溢出空間全部收縮 300px
	
	flex-basis加權總和爲 1000 = 1*300 + 2*200 + 3*100 ，
	項目權重佔比：
	vF1 = (1*300)/1000 = 0.3
	vF2 = (2*200)/1000 = 0.4
	vF3 = (3*100)/1000 = 0.3
	
	則項目適應有限容器收縮空間爲：
	sF1 = 300 * vF1  = 90px
	sF2 = 300 * vF2  = 120px
	sF3 = 300 * vF3  = 90px
	
	項目佔據容器的空間爲：
	rF1 = 300 - sF1 = 210px
	rF2 = 200 - sF2 = 80px
	rF3 = 100 - sF3 = 10px
	溢出空間全部收縮。
 */

---

簡寫：擴展比率、收縮比率和伸縮基準值 - flex

flex指定項目的擴展比率、收縮比率和伸縮基準值。

flex是一個簡寫屬性，可在聲明中設置 flex-grow、flex-shrink和 flex-basis屬性。

/* 兼容於支持 */
-webkit-flex: [-webkit-flex-grow] [-webkit-flex-shrink] [-webkit-flex-basis];
        flex: [flex-grow] [flex-shrink] [flex-basis];

		flex: auto;	//與 1 1 auto 相同
		flex: none;	//與 0 0 auto 相同

---

項目在交叉軸上單獨指定對齊方式 - align-self屬性

align-self屬性允許項目在交叉軸上單獨指定對齊方式。

align-self可能的值	描述
auto（默認）	項目繼承了容器的 align-items 屬性。如果沒有則爲 “stretch”。
stretch	如果項目未設置高度，將佔滿整個容器的高度。
flex-start	交叉軸的開始方向對齊。
flex-end	交叉軸的結束方向對齊。
center	交叉軸的中間對齊。
baseline	項目的第一行文字的基線對齊。

---

CSS知識題

題目	答案
水平垂直居中	display: flex; align-items:center; justify-content:center;
讓頁面裏的字體變清晰	-webkit-font-smoothing: antialiased;
讓頁面裏的滾動更平滑	-webkit-overflow-scrolling: touch；
讓block像inline-block那樣實現收縮寬度包裹內容	width: -webkit-fit-content;
指定內容寬度值最大的寬度作爲寬度	width: -webkit-max-content;
指定內容最小寬度值最大的寬度作爲寬度	width: -webkit-min-content;
讓inline-block像block那樣填充整個空間	width: -webkit-fill-available;
z-index 爲負值時無效	錯，z-index:auto;position:static;時無效，z-index可以爲負值。
禁止或顯示系統默認菜單	-webkit-touch-callout: none;
自定義頁面文本選中樣式	E::selection{ color: green; background-color: pink;}