移动WEB开发-----flex子级常见属性

一、flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

flex:<number>;
//默认值为0

flex:1;

二、align-self属性

align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

//如果想让第三个盒子下来，则需执行下面代码
div span:nth-child(3){
	align-self:flex-end;
}

三、order属性

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意：和z-index不一样。

//如果把第二个盒子挪到第一个盒子前面，需执行以下代码

div span:nth-child(2){
	order:-1;
	//默认是0  -1比0小所以在前面
}