flexbox對我來說沒有做正確的事

我正在玩弄顯示器：flex，而我無法讓它做我想做的事：平均分配三列。聽起來簡單和容易？那麼請看看這段代碼：flexbox對我來說沒有做正確的事

<div class='main'> 
    <div class="left">left</div> 
    <div class="center">article article article article article article article article article article article article article article article article article</div> 
    <div class="right">right</div> 
</div>

我的CSS看起來像這樣

body, html { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
div { 
    box-sizing: border-box; 
    border: 1px dotted black; 
    overflow: hidden; 
} 
.main { 
    height: 100%; 
    display: flex; 
    flex-direction: row; 
    flex-grow: 1; 
} 
.center, .left, .right { 
    flex-grow: 1; 
}

FIDDLE是在這裏：http://jsfiddle.net/n2PSg/2/

你可以看到，該中心DIV被拉伸，幾乎90％的可用寬度。我希望它是可用寬度的33％。

嘗試更改中心內的文本DIV：如果我將其更改爲單個單詞「文章」，則所有內容均按預期工作。

我在這裏想錯了什麼？

來源

2014-07-15 Martin Rode

柔性項的彎曲特性是：

柔性成長
彈性收縮
柔性基礎

您應該設置柔性基礎的元素如果你想保證相等的空間分佈，否則它會根據需要分配空間：

.main > div{ 
    flex: 1 1 30%; /* using the shorthand */ 
}

請參閱your updated fiddle

來源

2014-07-15 11:24:20 Christoph

謝謝你，現在效果更好。但我真正想要的是一個設置，在我的示例中，中心DIV填充空間時不會擠壓左側和右側列。那麼是否有一種方法可以讓中央列填充左右列寬度後的剩餘空間。現在看小提琴：如何告訴右欄不擠？ http://jsfiddle.net/n2PSg/5/ –

@Martin在此情況下將'flex-shrink'設置爲'0'。 – Christoph

謝謝！最後，那是失蹤的一塊。設置「flex-shrink」。現在似乎運轉如預期。 –

flexbox對我來說沒有做正確的事

回答

相關問題