flex-grow的用法

最近面试遇到的一道flex的算法题，查找之后做个简单记录。

以下内容摘自知乎一名博主。

在使用flex-grow的属性时,发现这个属性十分怪异,按照一般的博客或是介绍上来看,简单地可以理解为是按照flex-grow的数值分配父元素剩余空间,但是究竟是怎么计算的,都没有十分明确的说明,找了半天终于在知乎上找到了,经过一番测试,发现确实如此,我把经过测试之后的结论精简地写出来,如果要看原文的话,点击下方的链接就可以直达啊:

测试代码:

    
B
    
C
    
D
 

基本样式代码:

.a {
        display: flex;
        background-color: wheat;
   }

.b {
        flex-grow: 2;
   }

.c {
        flex-grow: 1;
   }

.d {
        flex-grow: 4;
   }

flex-grow重点说明落在 剩余 这两个字上,父元素剩余的空间,那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度-子元素总和的宽度),这里有两种情况:

(1)子元素没有设置宽度:那么整个父元素的宽度就是剩余宽度,这个时候flex-grow可以正常的发挥作用,但是在这种情况下的效果是一个伪分配,因为子元素没有设置宽度,那么子元素的宽度是自适应的,flex-grow起到的作用更像是min-width的作用,一旦子元素a的内容超过这个分配的空间,那么就会重新计算剩余空间,剩余空间=(父元素的宽度-子元素a的宽度),这个剩余宽度就会交给剩下的子元素进行分配,如果剩下的又发生以上的情况,计算依旧.如果直接设置width:100%,那么当前的子元素宽度总和已经超过父元素宽度,那么此时此刻,flex-grow就无效了,因为没有剩余空间了,你分配个毛线啊,于是,在这个时刻,就按照(子元素/子元素宽度总和)超出部分*依次给每个子元素减少宽度,也就是设置100%的话就是等分宽度,设置其他宽度的话按照公式自行计算即可

(2)子元素设置了宽度:如果子元素有宽度,那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素,这个时候flex-grow的作用就像是实实在在的width一样,给子元素增加宽度,在这种情况下的得到的效果就是一个无法改变的分配好的宽度,即使你子元素a的内容超出了分配好的宽度,也不会影响宽度分配情况,你只能用overflow来更好地美观一下啊,而这个就是我们希望的到的分配效果,代码如下:

.a div{
    width:0;
}

给每一个div设置一个width:0;然后进行分配flex-grow,这个时候加上去的宽度就是实实在在的width.