CSS Flexbox - colspan 的列宽相同

Question

我有两个容器，里面有 2 个和 3 个盒子。盒子之间的空间是固定的。

这是 JSFiddle:http://jsfiddle.net/e9dnxm3w/

HTML

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div class="two"></div>
</div>

CSS

div.container {
    display: flex;

    margin-bottom: 10px;
}

div.container > div {
    flex: 1;
    margin-left: 10px;
    padding-bottom: 50%;

    background-color: blue;
}

div.container > div:first-child {
    margin-left: 0;
}

div.container > div.two {
    flex: 2;
}

我的问题是我希望列具有完全相同的宽度(resp。相同位置的空格)。我如何告诉 Flexbox 它应该忽略 margin-left 或计算它？

Answer 1

因此，flex-basis 不包括边距(但包括填充)

因此，为了让您的网格正确显示，您需要手动将“缺失的 10 像素边距”添加到 flex-basis 值:

div.one
{
    /* ... */
    margin-left:10px;
    flex-basis:100px;
}

div.two
{
    /* ... */
    flex-basis:calc(200px + 10px); /* add the margin of the missing box */
}

div.three
{
    /* ... */
    flex-basis:calc(300px + 20px); /* add the margin of the two missing boxes */
}

演示:http://jsfiddle.net/tndgvkfq/