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

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

解决方案：

设置

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 >  <div >    <div>1A</div>  </div>  <div >    <div>1B</div>  </div>  <div >    <div>1C</div>  </div></div><div >  <div >    <div>2A</div>  </div>  <div >    <div>2B</div>  </div></div>

---

问题：

计算不使用

padding

。所以; 添加

padding

到

flex

元素并不能按照规范为您提供预期的宽度 。

例如，一个浮动的自动调整大小的伸缩容器中伸缩项目的可用空间为：

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

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

确定可用的

main

和

cross

空间的

flex

项目。对于每个维度，如果

flexcontainer

内容框的该维度是确定的尺寸，请使用该尺寸；如果

flex container

尺寸在

min

或

max-content

约束下确定，则该维度中的可用空间就是该约束；否则， 从该维度中可伸缩容器的可用空间中减去伸缩容器的边距，边框和边距，然后使用该值
。 这可能会导致无穷大的值。

如果从元素的大小中减去

padding

和

margin

，则会得到：

1A + 1B = 2A

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