flex布局(四) : 设置item上的属性

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

• 案例ÿ