CSS Flexbox問題：爲什麼我的flexchildren的寬度受其內容影響？

我的柔性箱的兩個孩子每個都給予box-flex: 1的風格。我的理解是，它們的寬度應該是彼此相等（均佔用其父柔性盒總寬度的50％）。但是，當內容添加到孩子們，他們的寬度變化（取決於內容和填充）！爲什麼會發生？CSS Flexbox問題：爲什麼我的flexchildren的寬度受其內容影響？

CSS：

.hasFlex { 
    display: box; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    box-align: start;} 
.box0 { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0;} 
.box1 { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1;} 
.box2 { 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
    box-flex: 2;} 
.box3 { 
    -webkit-box-flex: 3; 
    -moz-box-flex: 3; 
    box-flex: 3;} 
.container { 
margin-bottom: 10px; 
}

HTML：

<div class="container hasFlex"> 
<div id="main" role="main" class="box1"> 
    <div class="innerBG"> 
     a bunch of stuff (divs, text, etc) go here 
    </div> 
</div> 
<div id="sidebar" class="box1"> 
    <div class="innerBG"> 
     a bunch more stuff (divs, text, etc.) go here 
    </div> 
</div> 
</div>

來源

2011-11-02 zakdances

http://stackoverflow.com/q/36247140/3597276 –

的解決方法，這是添加width: 0到.box1元素。

參見：http://jsfiddle.net/thirtydot/fPfvN/

我想我發現了我自己在這裏：http://oli.jp/2011/css3-flexbox/

包含文本內容的框子元素的首選寬度是目前不換行文字，導致非常不直觀的寬度和彎曲計算→在一個盒子元素子元素上聲明一個寬度（超過幾個字）（曾經奇怪爲什麼flexbox演示全部是「1,2,3 「）

注意，對於您的情況，它看起來更容易使用display: table + table-layout: fixed：http://jsfiddle.net/thirtydot/fPfvN/1/

這會甚至工作在更多的瀏覽器。

來源

2011-11-02 19:07:05 thirtydot

任何寬度都可以。爲了降解，也可以在這種情況下使它達到50％。 – Barney

百分比寬度不會像絕對寬度一樣強制使用解決方法。（在Webkit中，chrome v27） – Jonathon

我只是想說，通過在孩子中使用'width：0'，父母中的justify-content：spaced-between;和'-webkit-flex-direction的組合：row;'''-webkit-flex-wrap：wrap;'也在父類中，我得到了非常漂亮，性能良好的方塊，它們間隔均勻並且爲長文本打開下一行。我經歷了很多答案纔得到了我的理想行爲，'width：0'幫助我解決了最後一件事！ –

CSS Flexbox問題：爲什麼我的flexchildren的寬度受其內容影響？

回答

相關問題