移动端弹性布局flex，CSS3自适应

一、Flex布局

今天整理了一些关于Flex布局，参考了好多大神的杰作

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

[外链图片转存失败(img-RRTXDeW1-1564145870108)(E:\Word\JACK\笔记\flex.assets\3791e575c48b3698be6a94ae1dbff79d.png)]

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

容器的属性//以下6个属性设置在容器上。
flex-direction	属性规定灵活项目的方向
flex-wrap	属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
flex-flow	符合属性（flex-direction flex-wrap）
justify-content	用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items	属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-content	属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

项目的属性//以下6个属性设置在项目上。
align-self	属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
flex-grow	属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
order	属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-shrink	属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex	属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-direction //属性规定灵活项目的方向

flex-direction	属性规定灵活项目的方向
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

flex-wrap //属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap	属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

justify-content //用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

justify-content	用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
flex-start	默认值。项目位于容器的开头。		测试 »
flex-end	项目位于容器的结尾。		测试 »
center	项目位于容器的中心。		测试 »
space-between	项目位于各行之间留有空白的容器内。		测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。		测试 »
initial	设置该属性为它的默认值。请参阅 initial。		测试 »
inherit	从父元素继承该属性。请参阅 inherit。

align-items //属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-items	属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。		测试 »
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。		测试 »
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。		测试 »
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。		测试 »
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。		测试 »
initial	设置该属性为它的默认值。请参阅 initial。		测试 »
inherit	从父元素继承该属性。请参阅 inherit。

align-content //属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

align-content	属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。		测试 »
center	元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）		测试 »
flex-start	元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。		测试 »
flex-end	元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。		测试 »
space-between	元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。		测试 »
space-around	元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。		测试 »
initial	设置该属性为它的默认值。请参阅 initial。		测试 »
inherit	从父元素继承该属性。请参阅 inherit。

align-self //属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

align-self	属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。	测试 »
stretch	元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。	测试 »
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。	测试 »
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。	测试 »
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。	测试 »
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

flex-grow //属性用于设置或检索弹性盒子的扩展比率。

flex-grow	属性用于设置或检索弹性盒子的扩展比率。
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

order 属性 设置或检索弹性盒模型对象的子元素出现的順序。

order	属性 设置或检索弹性盒模型对象的子元素出现的順序。
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

例子：

	
Web的Flex弹性盒模型
	


		
[ flex ]
		

			

				

					
display: -webkit-flex;
				
				

					
width:100px;
					
flex: 2;
					
flex: 1;
				
			

			

				

					
display: -webkit-flex; 
				
				

					

						width:150px; margin-right:10px;
					
flex: 1;
					

						width:150px; margin-left:10px;
				
			
		

		
[ flex-direction ]
		

			

				

					
flex-direction: row; /*default*/
					
display: -webkit-flex;
				
				

					
flex: 1;
					
flex: 2;
					
flex: 3;
				
			

			

				

					
flex-direction: row-reverse;
					
display: -webkit-flex; 
				
				

					
flex: 1;
					
flex: 2;
					
flex: 3;
				
			

			

				

					
flex-direction: column;
					
display: -webkit-flex; 
				
				

					
flex: 1;
					
flex: 2;
					
flex: 3;
				
			

			

				

					
flex-direction: column-reverse;
					
display: -webkit-flex; 
				
				

					
flex: 1;
					
flex: 2;
					
flex: 3;
				
			
		

		
[ flex-wrap ]
		

			

				

					
-webkit-flex-wrap: nowrap; /* default */
					
display: -webkit-flex; 
					
width: 400px
				
				

					
100px;
					
width: 200px;
					
width: 300px;
				
			
			

				

					
-webkit-flex-wrap: wrap
					
display: -webkit-flex; 
					
width: 400px
				
				

					
100px;
					
width: 200px;
					
width: 300px;
				
			
			

				

					
-webkit-flex-wrap: wrap-reverse
					
display: -webkit-flex; 
					
width: 400px
				
				

					
100px;
					
width: 200px;
					
width: 300px;
				
			
	
		

		
[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */

		
[ justify-content ]
		

			

				

					
/* 效果如同 float:left; */
					
justify-content: flex-start; /* default */
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
/* 效果如同 float:right; */

					
justify-content: flex-end;
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
/* 第三代水平居中方案 */
					
justify-content: center;
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
justify-content: space-between; 
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
justify-content: space-around; 
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			
		

		
[ align-self ]
		

			

				

					
display: -webkit-flex;
				
				

					
align-self:flex-start;
					
align-self:flex-end;
					
align-self:center;
					

						align-self:auto;
						/*default */
					

					
align-self:baseline;
					
align-self:stretch;
				
			
		

		
[ align-items ]
		

			

				

					
align-items: flex-start; /* default */
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
align-items: flex-end; 
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
/* 第三代垂直居中 */
					
align-items: center; 
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
align-items: baseline; 
					
display: -webkit-flex;
				
				

					
width:100px;
					
width:100px;
				
			

			

				

					
align-items: stretch; 
					
display: -webkit-flex;
				
				

					
height:100px;
					
min-height:20px;
					
max-height:60px;
				
			
		


		
[ align-content ]
		

			

				

					
/*  对比 align-items*/
					
align-items: flex-start
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			

			

				

					
align-content: flex-start; 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			

			

				

					
align-content: flex-end; 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			
			

				

					
align-content: center; 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			
			

				

					
align-content: space-between; 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f
				
			
			

				

					
align-content: space-around; 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			
		

			

				

					
align-content: stretch; /*default*/ 
					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
d
					
e
					
f

				
			
	
	
		
	

		
[ order ]
		

			

				

					
display: -webkit-flex;
				
				

					
a
					
b
					
c
					
 d (order:-1) 
					
e
					
f