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

Question

下面是两行。

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

• 第二行 是中的两项flex 1。

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

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

题

如何使flex box在其计算中包括填充，以使示例中的box正确排列？

.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容器的边距，边框和水平尺寸中的填充
• 垂直尺寸无限
  
  

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

确定可用的main和cross空间的flex项目。对于每个维度，如果flex container内容框的该维度是确定的尺寸，请使用该尺寸；如果flex container尺寸在min或max- content约束下确定，则该维度中的可用空间就是该约束；否则， 从该维度中可伸缩容器的可用空间中减去伸缩容器的边距，边框和边距，然后使用该值
。 这可能会导致无穷大的值。

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

1A + 1B = 2A

但是，执行完此操作后，将填充添加到元素中。元素越多，填充越多。宽度未计算出来，导致您的陈述为假。