为什么 Flexbox 会创建不必要的间距？

Question

所以我正在编写一个代码，我需要在使用 flex 时将卡片均匀地排成一行。但是，我在右侧有一些间距，无法找出发生这种情况的原因。我尝试检查元素，但它只是显示整个卡片向右延伸，但它这样做的背后没有真正的原因。我滚动浏览了 CSS 代码，右侧没有额外的宽度。

<section id="jobs">
    <!--Employing cards-->
    <div class="container-fluid container-fluid-shorter bg-white">

        <!--Assistant card-->

        <div class="row">
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h6 class="card-title font-weight-lighter pb-3">Custom units</h6>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End of employing cards section-->
</section>

我对 CSS 所做的调整：

.width-37{
    max-width: 37.5vh;
}
.card-body{
    padding-left: 0; !important;
    padding-right: 0; !important;
}

我试图将所有项目放置在每个项目之间有小间距的行中，并且当您为不同的屏幕尺寸设置大、中、小行时，所有项目都会创建行。出于某种原因，弹性项目在每个项目的右侧做间距。它是 480 像素宽和 180 像素高。我希望它是 180 x 180 像素，所以高度和宽度相同。有人知道为什么会这样吗？

Answer 1

.width-37{
    max-width: 37.5vh;
}

这导致右侧的间距。此外，!important

之前不应有 ;

Answer 2

这是由于块级元素的呈现方式，而不是 Flexbox 特定的问题。块级元素总是占据包含元素的整个宽度。如果你在块级元素上设置了宽度，并且它没有填充包含元素，剩​​余的空间将被margin填充。

示例

div {
  min-height: 24px;
}

div:nth-child( 1 ) {
  width: 100px;
  background-color: rebeccapurple;
}

div:nth-child( 2 ) {
  max-width: 200px;
  background-color: gold;
}

div:nth-child( 3 ) {
  width: 20vw;
  background-color: silver;
}

<div></div>
<div></div>
<div></div>

默认的内容流向是从左到右，以及为什么元素是向左。每个元素右侧的所有空间都是边距。这就是 Bootstrap 列元素内部发生的情况。

Answer 3

这就是原因 *行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧对齐。 Documentation here

为了移除排水沟上的填充，您可以将类 no-gutters 添加到您的行中。