css 如何让flexbox在计算中包含填充?

bn31dyow  于 2023-02-26  发布在  其他
关注(0)|答案(5)|浏览(97)

下面是两行。

      • 第一行**是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>
abithluo

abithluo1#

解决方案:
在子元素上设置margin,而不是在flex项上设置padding

.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元素并没有通过spec提供预期的宽度。
具体条款
例如,浮动的自动调整大小的Flex容器中Flex项的可用空间为:

  • Flex容器的包含块的宽度减去Flex容器在水平维度上的边距、边框和填充
  • 垂直方向无限大

为什么不计算填充呢?这是规格要求的。

  • 确定flex项的可用maincross空间 .对于每个维度,如果flex container的内容框的维度是确定的大小,则使用该维度;如果在minmax-content约束下确定flex container的维度的大小,则该维度中的可用空间是该约束;否则,从该维度中Flex容器的可用空间中减去Flex容器的边距、边框和填充,并使用该值 这可能导致无穷大的值。*

如果从元素大小中减去paddingmargin,则得到:

    • 1A +1B = 2A**

然而,在你这样做之后,填充被添加到元素中。元素越多,填充就越多。这没有在宽度中计算,导致你的语句为假。

fnx2tebb

fnx2tebb2#

如何让flexbox在计算中包含填充?
在您的代码中,计算中包含填充 *。
根据质量标准1A +1B = 2A
我不认为这是正确的。也许提供一个链接参考的解释。

flex-grow属性

flex: 1应用于元素时,使用flex简写属性表示以下内容:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex-grow告知弹性项目消耗容器中的可用空间。
下面是您的代码:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

在第一行中,padding-right: 10px应用于三个弹性项目。
在第二行中,padding-right: 10px应用于两个弹性项目。
因此,在第一行中要分配的可用空间少了10px,这破坏了网格的对齐。
对于分配空间(例如,您希望元素占用容器的剩余高度或宽度),请使用flex-grow
要精确调整弹性项目的大小,请使用flex-basiswidthheight
下面是一些更多的信息:

dpiehjr4

dpiehjr43#

我不确定我是否遵循了公认的答案。嵌套的flex容器似乎与问题无关。如果您在.Item上运行没有display: flex;的示例,问题仍然存在。
这里的问题似乎是flex-grow只计算在考虑累积水平填充之后它可以占用的可用空间。
让我们假设顶层flex容器的宽度为300px。

    • 第一行的可用空间**:300像素-30像素填充= 270像素

该行中的flex项的flex-grow为1、1和2,总共4个单位。270/4 = 67.5px。因此,1A和1B的内容框各为67.5px,1C的内容框为135px。

    • 第二行的可用空间**:300像素-20像素填充= 280像素

在这一行中,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网格已经得到了很好的支持,并且是当今解决这个问题的更惯用的方法。

.Row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.Item:nth-child(n + 3) {
  grid-column: span 2;
}

.Item > div{
  background:#7ae;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item">
    <div>1C</div>
  </div>
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>
xfb7svmp

xfb7svmp4#

默认情况下,使用弹性框时,元素宽度或高度的计算中不包括填充属性。要在计算中包括填充,可以将box-sizing属性设置为border-box。

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
  box-sizing: border-box; // Add this line
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}
4nkexdtk

4nkexdtk5#

可以使用浮动伪块元素代替填充,如下所示:(本例中为30px右填充)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}

相关问题