flex布局总结

flex布局总结

以下6属性设置在容器上：

1. flex-direction		决定主轴方向
2. flex-warp			决定一排放不下，如何换行
3. flex-flaw			1和2两属性的合并写法
4. justify-content		定义项目在主轴上的对齐方式  
5. align-items			定义项目在交叉轴的对齐方式
6. align-content		定义了多根轴的对齐方式。如果有一根，则不起作用

1.1	flex-direction:  | row(自左向右。小数在左边，默认值)
					 | row-reverse(自右向左。小数在右边) 
					 | column(自上到下。小数在上边) 
					 | column-reverse(自下到上。 小数在下边);
							   
2.1	flex-warp:  | nowrap(不换行。默认值) 
				| warp(换行) 
				| warp-reverse(换行。第一行在下方);
						 
3.1	flex-flaw: row nowarp; (1和2属性的合并写法，自左向右，不换行)

4.1	justify--content:  | flex-start(左对齐。默认值)
					   | flex-end(右对齐) 
					   | center(居中) 
					   | space-between(分配元素之间。两端对齐，项目之间间隔相等)
					   | space-around(分配元素周围。每个项目两侧的间隔相等)
					   
5.1  align-items:  | flex-start(交叉轴起点对齐) 
				   | flex-end(交叉轴终点对齐) 
				   | center(交叉轴中点对齐) 
				   | baseline(项目的第一行文字的基线对齐) 
				   | stretch(如果项目未设置高度，或者设置为auto，将占满整个容器高度。默认值)
				   
6.1 align-content:  | flex-start(与交叉轴起点对齐)
					| flex-end(与交叉轴终点对齐)
					| center(交叉轴中点对齐)
					| space-between(与交叉轴两端对齐，轴向之间的间隔平均分布)
					| space-around(每根轴线两侧的间隔都相等)
					| stretch(轴线占满整个交叉轴。默认值)
					

以下6种属性设置在项目上：

1 order: 值的类型为：整数。定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2 flex-grow: 值的类型为：数字。定义项目的放大比例。默认为0，即如果有剩余空间也不放大。

3 flex-shrink: 值的类型为：数字。定义项目得缩小比例。默认为1，即空间不足，该项目将缩小。

4 flex-basis: 值的类型：auto,或px,rem,em等长度值。定义项目占据的主轴空间，默认为auto。

5 flex: 2,3,4三属性的合并写法。如：flex: 0 0 auto;

6 align-self: 调整单个项目与其他项目不一样的对齐方式，默认值为auto。即继承父元素的align-items属性，没有父元素则为stretch。
  align-self: | auto(默认值) 
  			  | flex-start(交叉轴起点对齐) 
  			  | flex-end(终点对齐) 
  			  | center(中点对齐) 
  			  | baseline(第一行文字基线对齐) 
  			  | strech(占满交叉轴);