Question

在探索Flexbox的使用时，我碰到了一些我发现有点奇怪的东西。如果我将三个水平边距为10px的子项投入Flexbox容器，每个子项的flex值为1，则每个子项的宽度相等，这很好。但是如果我有两个孩子，其中一个的灵活值为2，那就不是2 / 3rds-1 / 3rd分裂了。但是，如果我删除了边距，则需要2 / 3rds-1 / 3rd分割。

以下是一些示例代码：

<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元素，您会看到flex: 2; div的宽度为373PX。

总而言之，它是根据div的实际宽度计算宽度，不包括边距空间。首先评估边距空间，然后剩下的将以数学方式加起来。

Flexbox子级上的边距如何影响其计算宽度？

1 个答案: