背景
Flexbox 是一个很好用的 CSS 布局模式，它使得通过简单的 CSS 样式就可以实现复杂的布局效果。但是在实际应用中，会发现容器与子元素之间的空白问题会让我们感到非常困惑。
具体来说，当我们使用 Flexbox 布局时，容器的宽度不符合我们的预期，或者子元素与容器之间存在前后空白。这往往会占用视觉空间，降低页面的美观程度。那么，如何解决这些问题呢？
解决方案
1. 设置容器的 box-sizing 属性
默认情况下，元素的宽度计算方式是 content-box，即元素总宽度等于 content width + padding + border。而如果我们希望元素的宽度计算方式为 border-box，即元素总宽度等于 content width，我们可以使用 box-sizing 属性。box-sizing 属性有两个取值：
- content-box：默认值，元素总宽度等于 content width + padding + border；
- border-box：元素总宽度等于 content width。
在 Flexbox 布局中，我们通常会使用 border-box，因为这样可以更好地控制容器与子元素之间的间距。我们可以在容器中使用如下代码进行设置：
.container {
box-sizing: border-box;
display: flex;
}2. 设置子元素的 flex 属性
在 Flexbox 布局中，子元素的布局方式是由其 flex 属性决定的。flex 属性是一个复合属性，包括三个子属性：flex-grow、flex-shrink 和 flex-basis。
- flex-grow：默认为 0。如果所有的子元素的 flex-grow 都为 0，那么它们的宽度等同于它们原本的宽度，如果容器的宽度不足以容纳所有子元素，那么它们将会缩小，如果容器宽度足够，那么它们将会等分容器的宽度，剩余的空间按照子元素实际的宽度进行分配。
- flex-shrink：默认为 1。如果所有子元素的 flex-shrink 都为 1，那么它们的宽度将会在空间不足时自动缩小。如果有一个子元素的 flex-shrink 为 0，那么它在空间不足时不会缩小。
- flex-basis：默认为 auto。子元素的初始宽度，可以是百分比、像素或者任意其他单位。
我们可以在子元素中使用如下代码进行设置：
.item {
flex: 1;
}上述代码表示所有的子元素都会平均分配剩余的空间，并且它们不会缩小。我们还可以在子元素中使用如下代码进行更细致的设置：
-- -------------------- ---- ------- -- ---- -- ------- - ----- - - ---- -- ---- ---------- -- - -- ---- -- ------- - ----- - - ----- -- ---- ------------- -- -
3. 设置容器的 justify-content 属性
justify-content 是一个容器属性，用来设置子元素的水平位置。justify-content 属性可以取值：
- flex-start：子元素从容器的起始位置开始排列。
- flex-end：子元素从容器的结束位置开始排列。
- center：子元素在容器中居中对齐。
- space-between：两端对齐，子元素之间的间隔都相等。
- space-around：子元素之间的间隔都相等，但是也会在容器的两端留出一定的空白。
在实际应用中，我们可以使用 justify-content:space-between; 让子元素之间的间隔都相等。如下代码所示：
.container {
display: flex;
justify-content: space-between;
}4. 去除空格和回车换行符
在 HTML 中，我们采用缩进、空格、回车和换行符等来美化代码的格式。但是这些符号在渲染时都会被解析成空格，这就会在 Flexbox 布局中产生一些我们不希望看到的空白。因此，我们可以通过去除空格和回车换行符的方式来解决问题。如下面的代码所示：
<div class="container"> <div class="item"></div><div class="item"></div><div class="item"></div> </div>
这段代码中，我们去掉了每一个子元素之间的空格和回车换行符，这样就可以避免子元素之间的空白了。
总结
Flexbox 布局是前端开发中广泛使用的一种布局方式。在使用 Flexbox 布局时，我们通常会遇到容器宽度与子元素空白的问题。了解除此类问题的解决方案，可以帮助我们更灵活、自如地掌控网页布局。
以上就是有关 Flexbox 容器宽度与子元素前后空白问题的解决方法。我们可以通过设置容器的 box-sizing 属性，设置子元素的 flex 属性，设置容器的 justify-content 属性，以及去除空格和回车换行符等方式，达到控制布局的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64804b9348841e9894fc80dd