平凡前端之路_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;}