相同的寬度集裝箱，柔性成長不工作

Question

我試圖使用Flex創建相同寬度的柔性項目，但他們不斷變化的寬度取決於柔性項目子女數

fiddle

正如你所看到的，正確的綠色容器要小得多，儘管兩者都有flex-grow：1

我該如何解決這個問題？謝謝！

span { 
    display: inline-block; 
    width: 10px; 
    height: 30px; 
    border: 1px solid red; 
} 
.container { 
    display: flex; 
    display: -webkit-flex; 
    border: 1px solid blue; 
    width: 200px; 
    padding: 2px; 

} 
.item { 
    flex-grow: 1; 
    -webkit-flex-grow: 1; 
    border: 1px solid green; 
} 

Answer 1

使用Flex：代替1柔性成長：1似乎解決這個問題。

Answer 2

，如果你不指定寬度到Flex項目（.item），他們寬度爲「自動」，他們將調整到其子元素（在你的情況「跨度」）。

大多數柔性盒的實現都爲其項目指定了「寬度」。

Answer 3

我想這應該是解決方案...

span { 
 
    flex-grow: 1; 
 
    height: 30px; 
 
    border: 1px solid red; 
 
} 
 
.container { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    border: 1px solid blue; 
 
    width: 200px; 
 
    padding: 2px; 
 

 
} 
 
.item { 
 
    flex-grow: 1; 
 
    display: inherit; 
 
    -webkit-flex-grow: 1; 
 
    border: 1px solid green; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 

 
    </div> 
 
    <div class="item"> 
 
     <span></span> 
 
    </div> 
 
</div>

Answer 4

或使用flex-basis：100％; （可以除去柔性生長：1）

它在http://www.w3.org/TR/css3-flexbox/#flex-basis很好解釋：

柔性基礎
此組件，其採用相同的值作爲「width」屬性，設置「flex-基礎'longhand並且指定柔性基礎：柔性項目的初始主要尺寸，在根據柔性因素分配自由空間之前。當從'flex'省略時，其指定值爲0％。

如果指定的'flex-basis'是'main-size'，則使用的flex基礎是flex項目的main size屬性的計算值。

上面的w3.org網址上有一個圖表，可以很容易地理解上述所有內容。值得一看。

Answer 5

這是因爲flex-basis默認爲auto，這是因素在元素的寬度。爲了保持你的元素用相同的，你需要明確設置flex-basis: 0：

.item { 
    flex-basis: 0; 
    flex-grow: 1; 
} 

參見：https://jsfiddle.net/Wexcode/Lgqhcr07/