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