Flex布局及相关属性介绍（下）

Flex布局及相关属性介绍（下）

Flex的相关属性

项目属性

3.flex-shrink:如果项目在主轴上装不下，设置项目的缩小因子（基本上不用）
4.flex-basis：设置项目在主轴的占据大小
（一个盒子，可以通过width来设置盒子在主轴上占据的大小，也可以通过flex-basis来设置盒子的大小，如果同时设置，则是flex-basis起作用）
属性值： 
	和width一样，可设置大小，优先级比width高
5.align-self：设置某个项目在交叉轴上的位置
属性值：
	flex-end：在交叉轴后面
	flex-center：在交叉轴中间
6.flex：复合属性
属性值：
	flex：flex-grow flex-shrink flex-basis（设置这三个属性）
	一般后两个属性用的较少，不写，因而flex最常用于代替flex-grow，例如：
	flex:1;    ==>    flex-grow:1;

Flex属性总结：

容器属性：

1. flex-direction：设置主轴的方向
2. flex-wrap：设置项目是否换行
3. flex-flow：同时设置direction和wrap的属性复合形式
4. justify-content：用来处理主轴上的富余空间
5. align-items：设置项目在交叉轴上的位置
6. align-content：容器中项目有多行，会形成多根主轴，此属性是用来设置多根主轴的摆放位置

项目属性：

1. order：设置单个项目在主轴的排列顺序
2. flex-grow：用来设置生长因子如何填充占领富余空间
3. flex-shrink:如果项目在主轴上装不下，设置项目的缩小因子（基本上不用）
4. flex-basis：设置项目在主轴的占据大小
5. align-self：设置某个项目在交叉轴上的位置