如何让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>

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项目.对于每个维度,如果flex container内容框的维度是一定的大小,请使用该维度; 如果flex container要在a min或max-content约束下调整其维度,则该维度中的可用空间是该约束; 否则,从该维度中Flex容器的可用空间中减去Flex容器的边距,边框和填充,并使用该值.这可能会产生无限的价值.

如果从元素的大小中减去padding和margin,则得到:

A1 + A2 = B1

但是,在执行此操作后,填充已添加到元素中.元素越多,填充越多.这不是在宽度上计算,导致你的陈述是错误的.

Answer 2

如何使flexbox在计算中包括填充？

在代码中，填充被计算在内。

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

我不认为这是正确的。也许提供链接参考以进行解释。

该 flex-grow物业

当您应用flex: 1到元素时，您将使用flex简写属性来表示：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

flex-grow 告诉弹性项目消耗容器中的可用空间。

这是您的代码：

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

在第一行中，padding-right: 10px将其应用于三个弹性项目。

在第二行中，padding-right: 10px将其应用于两个弹性项目。

因此，在第一行中分配的可用空间要少10像素。这破坏了网格的对齐方式。

要分配空间（例如，您希望元素占用容器的剩余高度或宽度），请使用flex-grow。

对于Flex项目使用的精确尺寸flex-basis，width或height。

这是更多信息：

• flex-grow未按预期调整flex项目的大小
• flex-grow如何与flexbox一起工作？