移动端-flex项目属性

1.align-self单个项目在交叉轴的对齐方式

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个项目的高度。

.box .con:nth-of-type(1){
				background-color: #f00;
				/* align-self: auto; */
				/* align-self: flex-start; */
				align-self: flex-end;
				/* align-self: center; */
			}

2.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 ，只能是整数

.box .con:nth-of-type(2){
				background-color: #0f0;
				order: 1;
			}

3.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 

.box .con:nth-of-type(2){
				background-color: #0f0;
				flex-grow: 2;
			}
.box .con:nth-of-type(3){
				background-color: #00f;
				flex-grow: 1;
			}

4.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 

.box .con{
				width: 200px;
				height: 200px;
				flex-shrink: 1;
			}

5.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 

6.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。