flex布局(四) : 设置item上的属性
1.order 决定item的排布顺序
设置整数,数值越小排在越前面
默认值为0
<style>
.item1{
order: 3;
}
.item2{
order: 2;
}
.item3{
order: 1;
}
</style>
2.align-self 决定单个item在交叉轴上的对齐方式
覆盖container设置的aligh-items,且效果相同
同样包含stretch、flex-start、center、flex-end、baseline属性
<style>
.container{
align-items: center;
}
.item2{
align-self: flex-start;
}
</style>
3.flex-grow 决定items如何扩展
- 可以设置正小数、正整数,默认值是0
- 只有当container在主轴上有剩余容量宽度时,flex-grow才会有效
- flex-grow决定的是扩展的宽度,而不是item的最终宽度,因此正常情况下不通过flex-grow来控制item的宽度
- 由于使用flex-grow会导致的item的宽度不可控,一般用在自适应宽度的元素上。比如两栏布局、三栏布局
- 固定宽度的元素,不建议设置flex-grow
1.当flex-grow总和超过1,每个item扩展的size等于 container剩余容量 / items的flex-grow总和 * item自己的flex-grow
- 案例:容器宽度500,item宽度均为50。扩展的size = 350 / (1+2+3) * item自身的flex-grow
<style>
.item1{
flex-grow: 1;
}
.item2{
flex-grow: 2;
}
.item3{
flex-grow: 3;
}
</style>
2.当flex-grow总和小于1,每个item扩展的size等于 container剩余容量 * item自己的flex-grow
- 案例ÿ