弹性布局flex-basis的理解

本文探讨了弹性布局中的flex-basis属性,如何与flex-shrink和flex-grow共同作用来分配弹性元素的空间。当设置flex-basis时,它比width具有更高的优先级,控制元素的基础尺寸。在内容自适应、空间分配和溢出处理等方面,flex-basis扮演关键角色,通过调整这些属性可以灵活布局元素。
摘要由CSDN通过智能技术生成

自己理解起来,弹性布局可以分开两个意思,display:flex-box有弹性的意思,也有布局的意思

justify-content可以定好几种布局。弹性的话,flex-basis结合flex-shrink,flex-grow可让弹性元素分配空间。

假定弹性元素的长度只受内容影响,那flex就剩下布局的作用了。如下图

弹性尺寸不发挥作用的布局

<div class="flex">
    <div>内容1</div>
    <div>第二个内容</div>  
</div> 
<style>
    .flex{
        display: flex;
        flex-basis: auto;
        width: auto; 
        justify-content: space-evenly;
    }
    div{
        box-shadow: 0  0 0 1px black;
    }
</style>

    但是当设置了flex-basis以后,就设定了弹性元素的(相当于width的)尺寸。width跟flex-basis的区别是,flex-basis的优先级更高。如果设置的flex-basis的值不为auto,那么width设置什么值都无效,以flex-basis的值为准。当flex-basis的值为auto的时候,弹性元素才会是width设定的值,如果连width的值都是auto,那就内容自适应把。

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在CSS3中,flexbox布局是一种非常强大的布局方式,可以通过一些属性来实现弹性伸缩和对齐。其中,flex-grow、flex-shrink、flex-basis就是控制弹性伸缩的重要属性。 flex-grow 属性 flex-grow 属性用于指定元素在弹性容器中的伸展比率,即当元素所在容器有剩余空间时,元素按照比例分配剩余空间。默认值为 0,即当剩余空间不足时,元素不会伸展。 例如,当一个容器中有两个元素,一个 flex-grow 值为 1,另一个为 2,则第二个元素在容器有剩余空间时会比第一个元素多分配一倍的剩余空间。 flex-shrink 属性 flex-shrink 属性用于指定元素在弹性容器中的收缩比率,即当元素所在容器空间不足时,元素按照比例收缩。默认值为 1,即元素会自动收缩。 例如,当一个容器中有两个元素,一个 flex-shrink 值为 1,另一个为 2,则第二个元素在容器空间不足时会比第一个元素多收缩一倍。 非常重要的一点是,如果所有元素的 flex-shrink 属性值都为 0,则它们不会收缩。 flex-basis 属性 flex-basis 属性用于指定元素在弹性容器中的基准值,即元素在不伸展或收缩的情况下所占据的空间。默认值为 auto,即元素的大小由其本身的大小决定。 例如,当一个容器中有两个元素,一个 flex-basis 值为 100px,另一个为 200px,则第一个元素在不伸展或收缩的情况下会占据 100px 的空间。 综合运用 这三个属性通常一起使用,例如: flex: 1 0 auto; 这个属性的意思是元素在弹性容器中会按照 flex-grow 属性的比例伸展,但不会收缩,基准值由 flex-basis 决定。 总结 flex-grow、flex-shrink、flex-basis 这三个属性是控制 flexbox 布局中弹性伸缩的重要属性,非常方便实用。熟练掌握它们的使用可以让我们更好地控制弹性布局,实现更加灵活的网页布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值