弹性布局flex-basis的理解

最新推荐文章于 2024-07-26 11:41:15 发布

a.jpg

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量4.4k

点赞数 2

分类专栏： css 文章标签： javascript

本文链接：https://blog.csdn.net/ou_nvhai/article/details/107524842

版权

本文探讨了弹性布局中的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，那就内容自适应把。