Flexbox的边框行为

Question

我正在尝试使用flexbox创建具有特定装订线尺寸的基于列的布局。

例如，我想包括向给定元素添加类似col-2的类的选项，该类将使该元素的大小是该行中其他元素的2倍。 col-3表示3个元素的大小，col-4表示4个元素，等等。

我正在通过更改添加了flex类的元素的col-n属性来做到这一点。

SCSS mixins

// 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>
如果我不使用任何填充，这将起作用：但是，如果我添加了填充，则尽管我在所有子元素上都设置了box-sizing: border-box;，但填充的大小还是小于内容的大小（好像是一个内容框）。我相信box-sizing: border-box;不适用于弹性商品。 

如何简单地将填充物包含在每个元素的大小中，就像它们是boxer-box元素一样？

我正在尝试使用flexbox创建具有特定装订线尺寸的基于列的布局。我想包括一个选项，可以将col-2之类的类添加到给定的元素中，从而使该元素成为...

Answer 1

'border-box'的意思是将我的大小调整到我的边界，其中包括边框。只有边距在边界之外。

当您在元素上放置背景色时，它还会为填充区域着色，但不会为边距着色。