一、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小所以在前面
}