Html 使用flexbox的边框框行为

我正在尝试使用flexbox创建具有特定檐槽大小的基于列的布局

我想包括这样一个选项：向给定元素添加一个类，如

col-2

，使该元素的大小等于该行中其他元素的2

col-3

用于3个元素的大小，

col-4

用于4个元素的大小，等等

我通过修改添加了

col-n

类的元素的

flex

属性来实现这一点

SCSS混合

// number of columns
$columns: 8;

// column proportions mixin
@mixin column-prop($n) {
    flex: $columns * $n;
}

.col-2 {
    @include column-prop(2);
}
.col-3 {
    @include column-prop(3);
}
.col-4 {
    @include column-prop(4);
}
...

HTML

<div class="grid">
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div class="col-2">flex: 16</div>
</div>

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<div class="grid">
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div class="col-4">flex: 32</div>
</div>

弹性：8
弹性：8
弹性：16
1.
2.
3.
4.
弹性：8
弹性：8
弹性：8
弹性：8
弹性：32

如果我不使用任何填充，则此选项有效： 但是，如果我添加了填充，则填充的大小除了内容之外（就好像它是一个内容框），尽管我已经设置了

box size:border-box。
我相信
框大小：边框框不适用于弹性项目

我如何简单地将填充包含在每个元素的大小中，就像它们是
boxer-box
元素一样？
编辑：CSS网格包括对檐槽的支持。让我试一下

HTML

我学到的是，尽管css网格可以完美地处理水槽，但您确实需要提前知道总列数。如果你知道的话，这是一个很好的方式来获得你需要的

Codepen:
问题似乎可能是您正在使用的
flex
属性的
flex-shrink
组件。不知道这有什么帮助。我在代码中没有看到任何边距。我希望在计算元素宽度时包含填充（在边框内）
<div class="grid-32">
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div class="col-2">flex: 16</div>
</div>

<div class="grid-32">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid-64">
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div class="col-4">flex: 32</div>
</div>

// number of columns
$columns: 8;

@mixin make-grid($n) {
  .grid-#{$n} {
    display: grid;
    width: 100%;
    grid-template-columns: repeat($n, 1fr);
    grid-column-gap: 1em;
    margin-bottom: 1em;
    div {
      grid-column-end: span $columns;
      background: #ccc;
      @for $i from 1 through 4 {
        &.col-#{$i} {
          grid-column-end: span $i*$columns;
          background: hsl($i * 256/$columns, 50%, 50%);
        }
      }
    }
  }
}

@include make-grid(4*$columns);
@include make-grid(8*$columns);