下面是两行。
- 第一行**是
flex 1
处的两个项目和flex 2
处的一个项目。
- 第一行**是
- 第二行**是
flex 1
处的两个项目。
- 第二行**是
根据质量标准1A +1B = 2A
但是,当计算中包含padding时,总和是不正确的,如下面的示例所示。
- 问题**
如何让flex 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>
5条答案
按热度按时间abithluo1#
解决方案:
在子元素上设置
margin
,而不是在flex
项上设置padding
。问题是:
在没有
padding
的情况下进行计算。将padding
添加到flex
元素并没有通过spec提供预期的宽度。具体条款
例如,浮动的自动调整大小的Flex容器中Flex项的可用空间为:
为什么不计算填充呢?这是规格要求的。
flex
项的可用main
和cross
空间 .对于每个维度,如果flex container
的内容框的维度是确定的大小,则使用该维度;如果在min
或max-content
约束下确定flex container
的维度的大小,则该维度中的可用空间是该约束;否则,从该维度中Flex容器的可用空间中减去Flex容器的边距、边框和填充,并使用该值。 这可能导致无穷大的值。*如果从元素大小中减去
padding
和margin
,则得到:然而,在你这样做之后,填充被添加到元素中。元素越多,填充就越多。这没有在宽度中计算,导致你的语句为假。
fnx2tebb2#
如何让flexbox在计算中包含填充?
在您的代码中,计算中包含填充 *。
根据质量标准1A +1B = 2A
我不认为这是正确的。也许提供一个链接参考的解释。
flex-grow
属性将
flex: 1
应用于元素时,使用flex
简写属性表示以下内容:flex-grow: 1
flex-shrink: 1
flex-basis: 0
flex-grow
告知弹性项目消耗容器中的可用空间。下面是您的代码:
在第一行中,
padding-right: 10px
应用于三个弹性项目。在第二行中,
padding-right: 10px
应用于两个弹性项目。因此,在第一行中要分配的可用空间少了10px,这破坏了网格的对齐。
对于分配空间(例如,您希望元素占用容器的剩余高度或宽度),请使用
flex-grow
。要精确调整弹性项目的大小,请使用
flex-basis
、width
或height
。下面是一些更多的信息:
dpiehjr43#
我不确定我是否遵循了公认的答案。嵌套的flex容器似乎与问题无关。如果您在
.Item
上运行没有display: flex;
的示例,问题仍然存在。这里的问题似乎是
flex-grow
只计算在考虑累积水平填充之后它可以占用的可用空间。让我们假设顶层flex容器的宽度为300px。
该行中的flex项的
flex-grow
为1、1和2,总共4个单位。270/4 = 67.5px。因此,1A和1B的内容框各为67.5px,1C的内容框为135px。在这一行中,2A和2B的
flex-grow
都为1。280/2 = 140px。因此,图1A和图1B的内容框的水平填充为67.5px +10px,总宽度为77.5px。
2A将具有140px +10px水平填充的内容框,使其总宽度为150px。
77.5px +77.5px ≠ 150px,换句话说,1A +1B ≠ 2A,这就是它们不排队的原因。
公认的答案确实解决了这个问题,但是自从这个答案被提交以来,CSS网格已经得到了很好的支持,并且是当今解决这个问题的更惯用的方法。
xfb7svmp4#
默认情况下,使用弹性框时,元素宽度或高度的计算中不包括填充属性。要在计算中包括填充,可以将box-sizing属性设置为border-box。
4nkexdtk5#
可以使用浮动伪块元素代替填充,如下所示:(本例中为30px右填充)