flex布局中flex:1和flex:auto的区别!

首先flex 是复合属性  是添加给子元素的
那咱们先来看flex 中的各个参数

flex-grow    属性定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大
flex-shrink  属性定义了项目的缩小比例 默认为1 即如果空间不足 该项目将缩小
flex-basis  属性定义了在分配多余空间之前 项目占据的主轴空间(相当于我们设置的width)
默认值为:  flex:0 1 auto;(默认不放大 放不下了缩小 优先采用自己本身宽度)

flex:1
 flex:1 1 0%; 有剩余空间就放大,空间不够就缩小,项目长度为0
<div class="wrap">
    <div class="box">小滕</div>
    <div class="box">小滕的滕不是这个腾</div>
    <div class="box">小滕的滕是这个滕</div>
 </div>
 
.wrap{
    height: 100px;
    display: flex;
}
.box{
    border: 2px solid yellowgreen;
    flex: 1;
}


flex:auto 
flex:1 1 auto;有剩余空间就放大,空间不够就缩小,项目长度为原本的长度
 <div class="wrap">
    <div class="box">小腾</div>
    <div class="box">不,是小滕</div>
    <div class="box">小腾的滕是这个滕</div>
 </div>
 
.wrap{
    height: 100px;
    display: flex;
}
.box{
    border: 2px solid yellowgreen;
    flex: auto;
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值