Question

下面是两行。

第一行是flex 1的两个项目，flex 2的一个项目。
第二行是flex 1的两个项目。

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

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

问题

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

＆＃13;

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

＆＃13;

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

＆＃13;

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元素并不能为您提供预期的宽度 spec

The specific article

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


Flex容器的包含块的宽度减去Flex容器的边距，边框和水平维度中的填充

垂直维度无限

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

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

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

1A + 1B = 2A

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

Answer 2

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

在您的代码中，填充包含在计算中。

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

我不相信这是正确的。也许提供一个解释的链接参考。

`flex-grow`属性

将flex: 1应用于元素时，您使用flex速记属性来说明这一点：

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

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

这是你的代码：

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

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

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

因此，在第一行中，分配的可用空间减少了10px。这打破了网格的对齐。

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

要精确调整弹性项目的大小，请使用flex-basis，width或height。

以下是更多信息：

Answer 3

您可以使用浮动的伪块元素而不是填充，如下所示：（在这种情况下，右填充为30px）

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}

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

3 个答案:

flex-grow属性

`flex-grow`属性