Flex 布局是一种流式布局模型，它可以在任何容器内保证子元素的宽度、高度和位置都是可预测的。尽管 Flex 布局的优越性能给前端开发带来了很多便利，但是在某些情境下，使用 Flex 布局也会遇到一些莫名其妙的问题。其中，奇怪的 white-space: nowrap 问题就是这些问题之一。
什么是 white-space: nowrap？
white-space 属性是用来设置如何处理元素中的空白符和换行符的。其中，white-space: nowrap 表示元素内的文本在遇到换行符之前不会换行，并保持在同一行上。
在普通的 HTML 文档中，我们通常会将 white-space: nowrap 用在某些表格单元格或行内元素上，所以将它用在 Flex 容器中似乎也不算有什么问题。然而，当我们使用 Flex 布局来定位它们时，问题就出现了。
Flex 容器中的 white-space: nowrap 问题
首先，来看一下下面这个简单的 Flex 布局示例：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> </div>
.container {
display: flex;
}
.item {
flex: 1;
}这个示例中有一个简单的 Flex 容器，其中包含四个 flex: 1 的子元素。运行代码，每个子元素应该会占满 Flex 容器的宽度，换言之，它们应该会平均分配容器的宽度。 然而，当我们给容器应用了 white-space: nowrap 时，如下所示：
.container {
display: flex;
white-space: nowrap;
}重新运行代码，我们会发现容器变成了这个样子：
可以看到，原本平均分配的子元素现在因为容器设置了 white-space: nowrap 而粘在了一起。它们的宽度也减小了，因为它们需要适应容器。
原因分析
这个问题的本质是，当我们设置了 white-space: nowrap 属性后，子元素之间的空白符和换行符被压缩在了一起，使它们看起来好像是在同一行上的。
正是由于这种压缩的效果，导致了子元素的宽度变窄。我们无法通过常规手段将元素拉开，因为空白符被处理为零宽度。
解决方案
在正常情况下，我们可以将 overflow 属性设置为 auto 来解决这个问题，但是这不能在 Flex 容器中使用，因为这会引起不必要的滚动条。这里我们需要一些特殊的技巧。
经过一定的实验和研究，我们可以通过增加 padding 属性和调整 box-sizing 属性来弥补 white-space 属性的影响。
我们可以像下面这样定义容器样式：
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ----------- ----- - ---------- - - - -------------- ----- -- -- ------------- -- -- ----------- ----------- -- -- ---------- --- ---------- -- -
这里，我们通过给容器内的子元素添加 padding-right 属性来使它们之间有一定的距离。我们还修改了 box-sizing 属性为 border-box，这样的话，我们添加的 padding 属性不会增加元素的宽度。
最后，我们使用 overflow-x: auto 将容器的水平滚动条隐藏起来，以便在需要时显示。这样，我们就能够成功解决 Flex 容器中的 white-space 问题了。
总结
在 Flex 布局中，我们需要注意 white-space: nowrap 的问题。通过使用 padding 属性和调整 box-sizing 属性，我们可以弥补 white-space 属性的影响，并顺利实现我们需要的布局效果。这个过程需要多次实验和调整，但是一旦掌握了这个技巧，我们就能够更加高效地使用 Flex 布局了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c864a968c7c53b0eeea7b