弹性布局flex-basis的理解

63 阅读 0 评论 42 点赞

我是靠谱客的博主谦让玉米，最近开发中收集的这篇文章主要介绍弹性布局flex-basis的理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

自己理解起来，弹性布局可以分开两个意思，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，那就内容自适应把。

当设置了弹性元素的初始值后，可以结合flex-shrink,flex-grow 来分配父元素剩下的空间。

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

    height: 25px;
}
</style>

每个弹性元素的长度都设置为50px。但最后显示都是100px每个。

弹性容器的长度为200px。两个弹性元素设定的初始长度为50px，总共就是100px

那么原本弹性容器剩下200-100=100px的空白。两个弹性元素的flex-grow都为1,则把100px的空白分配下来每个得到50px。

所以每个弹性元素的尺寸为flex-basis设定的50px+分配得到的空白50px=100px

flex-shrink同理，分配的是溢出的空间，父容器放不下，那就缩减弹性元素的尺寸。有多少空间放不下，就按flex-shrink标明的分量减少弹性元素的尺寸