flex布局（四）：设置item上的属性flex布局(四) : 设置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;
}
.
flex布局对齐方式item2{
flex-grow: 2;
}
.item3{
flex-grow: 3;
}
</style>
2.当flex-grow总和⼩于1，每个item扩展的size等于 container剩余容量 * item⾃⼰的flex-grow
案例：容器宽度500，item宽度均为50。 扩展的size = 350 * item⾃⾝的flex-grow
<style>
.item1{
flex-grow: .2;
}
.item2{
flex-grow: .2;
}
.item3{
flex-grow: .2;
}
</style>
3.实际应⽤，三栏布局，两边宽度固定，中间⾃适应
<style>
.container{
width: 700px;
height: 400px;
border: 1px solid #000;
/* flex布局的排列⽅式 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.item{
color: #fff;
text-align: center;
font-size: 18px;
}
.item1{
width: 80px;
flex-grow: 0;
}
.item2{
flex-grow: 1;
}
.
item3{
width: 100px;
flex-grow: 0;
}
</style>
<body>
<div class="container">
<div class="item item1" >固定宽度80</div>
<div class="item item2" >中间宽度⾃适应，撑满容器container</div> <div class="item item3" >固定宽度100</div>
</div>
</body>
4.flex-shrink 决定items如何收缩
可以设置正⼩数、正整数，默认值是1
只有当items的总宽度超过container的宽度时，才会有效。且默认收缩⾄等于container的宽度收缩计算⽅式和grow相同，但是最终收缩的宽度不能⼩于item的⽂本宽度和最⼩宽度
正常开发情况下⼀般让grow的值等于shrink，使item的宽度⾃适应扩展和收缩
<style>
.item1{
flex-shrink: 1;
}
.item2{
flex-shrink: 3;
}
.item3{
flex-shrink: 2;
}
</style>
5.flex-basis 设置item在主轴上的⼤⼩
默认值为auto
优先级⼤⼩：max-width > flex-basis > widht > 内容本⾝size
会覆盖设置在item上的width属性
<style>
.item1{
flex-basis: 100px;
}
.item2{
flex-basis: 200px;
}
.item3{
flex-basis: 300px;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。