如何让 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屋!
查看全文