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几乎拉伸到可用宽度的90％。我希望它恰好是可用宽度的33％。

尝试更改中心DIV内的文字：如果我将其更改为一个单词＆＃34;文章＆＃34;，一切都按预期工作。

我在这里想错了什么？

Answer 1

flex项的flex属性为：

柔性生长
柔性收缩
柔性基础

如果要确保相等的空间分布，则应为元素设置flex-basis，否则将根据需要分配空间：

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

请参阅your updated fiddle

flexbox对我来说没有做对的事情

1 个答案: