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

发布于06月13日

下面是两排.

First row是flex 1的两件商品和flex 2的一件.
Second Row等于flex 1的两件物品.

根据规范1A + 1B = 2A

但是当计算中包含padding时，正如你在下面的例子中所看到的，总和是不正确的.

QUESTION

如何让弹性框在其计算中包含填充，以便示例中的框正确对齐？

.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>

推荐答案

解决方案:

在子元素上设置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美元.

The specific article个

例如，浮动的自动调整大小的弹性容器中的弹性项的可用空间为:

flex容器包含块的宽度减go flex容器在水平维度中的边距、边框和填充

垂直维度上的无穷大

为什么没有计算填充？这就是规范所要求的.

Determine the available 100 and 101 space for the 102 items.对于每个维度，如果flex container的内容框的维度是确定的大小，则使用该维度；如果flex container的尺寸是在min或max-content约束下调整的，则该尺寸中的可用空间就是该约束；否则，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.

如果从元素的大小中减go padding和margin，则得到:

1A + 1B = 2A

但是，在您这样做之后，填充就添加到了元素中.元素越多，填充越多.这没有计算在宽度中，导致您的陈述是错误的.

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

推荐答案

Css相关问答推荐

将照片向下对齐至div并保持响应性

使用背景滤镜时，伪元素出现在div之前

日期面板未与Angular中的日期控件对齐

如何在不重叠侧边栏的情况下尽可能使元素居中？

为什么 CSS Calc() 函数只需要+或-运算符前后有空格

为什么 width： 100% 在 Flex 父级中缩小这个 div ？

排除特定元素的目标元素

有没有办法将px单位添加到 Sass mixin 的参数数组中？

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

Angular (13) material - 覆盖 CSS 文件不起作用

整个列的 CSS Grid Margin Top

如何仅包装左侧内容

在样式化组件中使图像重叠

基于内容显示(show)/隐藏(hide)同级div

CSS中的旋转地球

是否可以删除悬停在链接上时出现的手形光标？ (或将其设置为普通指针)

为什么在 CSS3 中启用硬件加速会降低性能？

CSS过渡自动高度不起作用

：last-child 没有按预期工作？

使图像具有响应性 - 最简单的方法