如何让 flexbox 在计算中包含填充?
[英] How to get flexbox to include padding in calculations?
本文介绍了如何让 flexbox 在计算中包含填充?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是两行.
根据规范1A + 1B = 2A
但是当计算中包含 padding 时，总和是不正确的，如下例所示.
<小时>
问题
如何让弹性框在其计算中包含填充，以便示例中的框正确排列?
.Row{显示:弹性；}.物品{显示:弹性；弹性:1;弹性方向:列；填充:0 10px 10px 0;}. 项目 >div{背景:#7ae;}.Flx2{弹性:2；}
<div class="项目"><div>1A</div>
<div class="项目"><div>1B</div>
<div class="Item Flx2"><div>1C</div>
<div class="Row"><div class="项目"><div>2A</div>
<div class="项目"><div>2B</div>
解决方案
解决方案:
在子元素上设置 margin 而不是 padding 在 flex 项目上.
.Row{显示:弹性；}.物品{显示:弹性；弹性:1;弹性方向:列；}. 项目 >div{背景:#7ae;边距:0 10px 10px 0;}.Flx2{弹性:2；}
<div class="项目"><div>1A</div>
<div class="项目"><div>1B</div>
<div class="Item Flx2"><div>1C</div>
<div class="Row"><div class="项目"><div>2A</div>
<div class="项目"><div>2B</div>
<小时>问题:
计算是在没有padding的情况下完成的.所以;将 padding 添加到 flex 元素并没有为您提供预期的宽度规范.
具体文章
<块引用>例如，浮动的自动调整大小的弹性容器中弹性项目的可用空间是:
- flex 容器包含块的宽度减去 flex 容器的边距、边框和水平尺寸中的填充
- 在垂直维度上无限
为什么不计算padding?这就是规范想要的.
<块引用>确定 flex 项目的可用 main 和 cross 空间.对于每个维度，如果 flex container 的内容框的那个维度是一个确定的大小，那么使用它；如果 flex 容器 的那个维度是在 min 或 max-content 约束下调整大小的，那么该维度中的可用空间就是那个约束；否则，从该维度中弹性容器的可用空间中减去弹性容器的边距、边框和填充，并使用该值.这可能会导致无限值.
如果你从元素的大小中减去 padding 和 margin，你得到:
1A + 1B = 2A
但是，在您这样做之后，填充被添加到元素中.元素越多，填充越多.这不是在宽度中计算的，导致您的陈述是错误的.
Below are two rows.
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:
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.
这篇关于如何让 flexbox 在计算中包含填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
