如何让flexbox在计算中包含填充？ [英] How to get flexbox to include padding in calculations?

问题描述

以下是两行。

c> flex 1 和一个位于 flex 2 。

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

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

但是，当填充包含在计算中时这个总和是不正确的，你可以在下面的例子中看到。

---

问题

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

  .Row {display：flex;}。Item {display：flex;挠曲：1;挠曲方向：柱; 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和LT; / DIV> < / DIV> < div class =Item> < DIV> 2B< / DIV> < / div>< / div>  

解决方案

解决方案：

在子元素上设置 margin 而不是<$ c $在您的 flex 项目中添加c> padding 。 $ b

  .Row {display：flex;}。Item {display：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和LT; / DIV> < / DIV> < div class =Item> < DIV> 2B< / DIV> < / div>< / div>  

$ b

---

问题：

计算过程不需要 padding 。所以;在 flex 元素中添加 padding 并不会使您的预期宽度增加
spec 。

特定文章

< blockquote>

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

• 柔性容器的包含块的宽度减去柔性容器的边界，边界和填充在水平维度中


• 垂直维度中的无限大

>

为什么没有计算填充？确定可用的主要的和
$ b

code> cross flex items 的空间。对于每个维度，如果 flex容器的内容框的维度为确定的大小，请使用该维度;如果 flex容器的尺寸大小小于 min 或 max-content 约束，该维度中的可用空间就是该约束;否则，从该维度中的flex容器可用空间中减去flex容器的边距，边框和填充并使用该值。

如果您减去 padding 和保证金，您将获得：

A1 + A2 = B1

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

Below are two rows.

• First row is two items at flex 1 and one at flex 2.

• Second Row is two items at flex 1.

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

But when padding is 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>

解决方案

The solution:

Set margin on the child element instead of padding on your flex item.

.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 padding to the flex element is not giving you your expected width by the spec.

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

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

Determine the available main and cross space for the flex items. 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 container is being sized under a min or max-content constraint, 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.

If you subtract the padding and margin from the element's size, you get:

A1 + A2 = B1

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.

这篇关于如何让flexbox在计算中包含填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！