css - flexbox 不适合我

Question

我正在玩 display: flex，但我无法让它做我想做的事:平均分布三列。听起来简单易行？那么请看这段代码:

<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 几乎拉伸(stretch)到了可用宽度的 90%。我希望它正好是可用宽度的 33%。

尝试更改中心 DIV 内的文本:如果我将其更改为一个单词“文章”，一切都会按预期进行。

我哪里想错了？

Answer 1

flex 元素的 flex 属性是:

• 灵活成长
• flex 收缩
• flex 基础

如果你想确保空间分布均匀，你应该为你的元素设置 flex-basis，否则它会根据需要分配空间:

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

参见 your updated fiddle