如何让 flexbox 在计算中包含填充？

Question

下面是两行。

• 第一行 是 flex 1 和 flex 2 的两个项目。

• 第二行 是 flex 1 的两个项目。

根据规格 1A + 1B = 2A

但是，当计算中包含 填充 时，总和不正确，如下例所示。

---

问题

如何让弹性框在其计算中包含填充，以便示例中的框正确排列？

 .Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

 <div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

原文由 DreamTeK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案：

在子元素上设置 margin 而不是在您的 padding flex 项目上设置 —。

 .Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}

 <div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

---

问题：

计算是在没有 padding 的情况下完成的。所以;将 padding 添加到 flex 元素不会按照 规范 为您提供预期的宽度。

具体文章

例如，浮动的自动调整大小的弹性容器中弹性项目的可用空间是：

• flex 容器的包含块的宽度减去 flex 容器在水平维度上的边距、边框和填充
• 垂直维度无限

为什么不计算填充？这就是规范想要的。

_确定 flex 项目的可用 main 和 cross 空间_。对于每个维度，如果 flex container 的内容框的维度是确定的大小，则使用该维度；如果 flex container 的该维度在 min 或 max-content 约束下调整大小，则该维度中的可用空间就是该约束；否则， 从该维度中 flex 容器的可用空间中减去 flex 容器的边距、边框和填充，并使用该值。 这可能会导致无限的价值。

如果你从元素的大小中减去 padding 和 margin ，你会得到：

1A + 1B = 2A

但是，在你这样做之后，填充被添加到元素中。元素越多，填充越多。这不是在宽度中计算的，导致您的陈述是错误的。

原文由 Randy 发布，翻译遵循 CC BY-SA 4.0 许可协议