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;
}

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

Answer 1

所以，flex-basis不包括边距（但包括填充）

因此，为了正确显示网格，您需要手动将“缺少的10px边距”添加到弹性基础值：

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 */
}

DEMO：http://jsfiddle.net/tndgvkfq/

CSS Flexbox - colspan的列宽相同

1 个答案: