css - Flexbox 子元素的边距如何影响它们的计算宽度？

Question

在探索 Flexbox 的使用时，我遇到了一些我觉得有点奇怪的事情。如果我将三个水平边距为 10px 的 child 扔到一个 Flexbox 容器中，每个 child 的 flex 值为 1，每个 child 的宽度都相等，这很好。但是如果我有两个 child ，其中一个的 flex 值为 2，那么它就不完全是 2/3rds-1/3rd split。但是，如果我删除边距，它是 2/3rds-1/3rd split，这是需要的。

下面是一些示例代码:

<div class = "flexbox">
    <div class = "flex" style = "background-color: red;">1/3</div>
    <div class = "flex" style = "background-color: green;">1/3</div>
    <div class = "flex" style = "background-color: blue;">1/3</div>
</div>
<div class = "flexbox">
    <div class = "flex double" style = "background-color: yellow;">2/3</div>
    <div class = "flex"  style = "background-color: purple;">1/3</div>
</div>
<style>
    .flexbox
    {
        display: flex;
    }

    .flexbox .flex
    {
        flex: 1;
        margin: 0 10px;
    }

    .flexbox .flex.double
    {
        flex: 2;
    }
</style>

http://jsfiddle.net/52fKh/

我不太明白第二个 Flexbox 中的宽度是如何计算的。任何人都可以阐明这一点，并可能提供一种解决方法以使两个 Flexbox 对齐吗？提前致谢!

Answer 1

从您可能的总宽度中减去边距空间，然后适当划分。

以这个 JS Fiddle 为例，为了演示，我将您的 flexbox 类宽度限制为 600PX...

http://jsfiddle.net/52fKh/2/

.flexbox
{
    display: flex;
    width: 600px;
}

对于您的 flex: 2; 示例...

两个div的左右边距都是10px，也就是每个div 20px，2个div的总边距空间是40px。

600-40 = 560

560/3 = 186.666666667

186.6666667 * 2 = 373.333333333

如果查看 inspect element，您会看到 flex: 2; div 的宽度为 373PX。

---

总结一下就是根据div的实际宽度计算宽度，不包括边距。首先评估边距空间，然后剩下的将在数学上相加。