flex-grow遇到的问题

在进行flex布局的时候，会经常遇到flex-grow无效这个问题

深入了解了一下，容器内item的flex-grow属性是按照父元素剩余空间来分配的。

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

1、子元素没有设置高度：

那么整个父元素的width就是剩余宽度，这个时候可以正常使用flex-grow.

2、子元素设置了宽度：

如果子元素有宽度,那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素,这个时候flex-grow的作用就像是实实在在的width一样,给子元素增加宽度,

在这种情况下的得到的效果就是一个无法改变的分配好的宽度,即使你子元素a的内容超出了分配好的宽度,也不会影响宽度分配情况,你只能用overflow来更好地美观一下啊,而这个就是我们希望的到的分配效果,代码如下:

.a div{
  width: 0;
}

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

示例代码入下：

<div class="a">
    <div class="b p">B</div>
    <div class="c p">C</div>
    <div class="d p">D</div>
 </div>

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

.b {
        flex-grow: 2;
   }

.c {
        flex-grow: 1;
   }

.d {
        flex-grow: 4;
   }

 

参考链接：https://www.jianshu.com/p/fbc6b4ebf3c6

                  https://www.jianshu.com/p/fbc6b4ebf3c6