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

How to get flexbox to include padding in calculations?

提问by DreamTeK

Below are two rows.

下面是两行。

• First rowis two items at flex 1and one at flex 2.

• Second Rowis two items at flex 1.

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

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

According to the spec 1A + 1B = 2A

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

But when paddingis included in the calculation the sum is incorrect as you can see in the example below.

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

---

---

QUESTION

题

How to get flex box to include padding into its calculation so the boxes in the example line up correctly?

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

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

回答by Randy

The solution:

解决方案：

Set marginon the child element instead of paddingon your flexitem.

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>

---

---

The problem:

问题：

The calculation is done without padding. So; adding paddingto the flexelement is not giving you your expected width by the spec.

计算无需padding。所以; 添加padding到flex元素并没有按照规范为您提供预期的宽度 。

The specific article

具体文章

For example, the available space to a flex item in a floated auto-sized flex container is:

• the width of the flex container's containing block minus the flex container's margin, border, and padding in the horizontal dimension
• infinite in the vertical dimension

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

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

Why is the padding not calculated? That's what the spec wants.

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

Determine the available mainand crossspace for the flexitems. For each dimension, if that dimension of the flex container's content box is a definite size, use that; if that dimension of the flex containeris being sized under a minor max-contentconstraint, the available space in that dimension is that constraint; otherwise, subtract the flex container's margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

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

If you subtract the paddingand marginfrom the element's size, you get:

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

1A + 1B = 2A

1A + 1B = 2A

However, after you did that, the padding was added to the element. The more elements, the more padding. That's not being calculated in the width, causing your statement to be false.

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

回答by Michael Benjamin

How to get flexbox to include padding in calculations?

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

In your code, padding isincluded in the calculations.

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

According to the spec 1A + 1B = 2A

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

I don't believe this is correct. Maybe provide a link reference for an explanation.

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

---

---

The flex-growproperty

该 flex-grow物业

When you apply flex: 1to an element, you are using the flexshorthand property to say this:

当您应用flex: 1到一个元素时，您使用的是flex速记属性来表示：

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

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

flex-growtells a flex item to consume the free space in the container.

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

Here is your code:

这是你的代码：

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

In the first row, padding-right: 10pxis applied to threeflex items.

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

In the second row, padding-right: 10pxis applied to twoflex items.

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

Hence, in the first row there is 10px less free space to distribute. This breaks the grid's alignment.

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

For distributing space (e.g., you want an element to take the remaining height or width of a container), use flex-grow.

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

For precise sizing of a flex item use flex-basis, widthor height.

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

Here's some more info:

以下是更多信息：

• flex-grow not sizing flex items as expected
• How exactly does flex-grow work with flexbox?

• flex-grow 没有按预期调整弹性项目的大小
• flex-grow 是如何与 flexbox 一起工作的？

回答by sorioz

You can use floated pseudo block elements instead of padding, like this: (In this case 30px right padding)

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

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