flex属性:用flex属性定义子项目分配剩余的空间,用flex来表示占多少份数。
语法:flex:1;表示在剩余空间中,占1份。
flex:2;表示在剩余空间中,占2份。
占的份数越大,元素的大小就越大。
.father span:nth-child(2) {
/*在剩余空间中占2份*/
flex: 2;
background-color: tomato;
}
.father span:nth-child(3) {
/*在剩余空间中占3份 所以这个span占的份数大于第二个span*/
flex: 3;
background-color:violet;
}
align-self:控制子项自己在侧轴上的排列方式。
align-self属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
语法格式:
span:nth-child(2) {
/*设置自己在侧轴上的排列方式,不跟大众走 贴着尾部排列*/
align-self:flex-end;
/*从头部开始*/
align-self:flex-start;
/*在侧轴上居中对齐*/
align-self:center;
}