你不知道的 CSS flex 陷阱
原创你不知道的 CSS flex 陷阱
原创
目录
前言
你好，我是喵喵侠。在现代Web开发中，CSS的Flexbox布局模式，因其灵活性和简洁性而备受推崇。然而，即使是经验丰富的前端开发者，有时也会遇到一些令人困惑的问题。例如，当我们使用 flex-wrap: wrap 属性后，发现元素之间出现了意想不到的上下间距，这到底是为什么呢？怎么样才能解决这个问题呢？
我将会在本文中，为你详细探讨这一现象的原因，并提供具体的解决方法。与此同时，我也会穿插一些与此案例相关的Flexbox属性教程，以帮助你更好地理解和应用Flexbox布局。
问题描述
某次我做项目时候，用到了 flex 布局，布局的页面效果，大概是一个父容器盒子 div 里面，有几个子元素 div，这几个子元素 div 一行大概只能放下 3 个，超出就需要换行显示了。显示效果是依次从左到右，从上至下排列，如下图所示：
知道要换行，当然就用flex-wrap:wrap这个了，这代表 flex 布局的子元素需要换行显示。
正当我洋洋得意，以为这个小问题立马被搞定时，现实给我泼了一盆冷水，奇怪的事情发生了！
效果跟我上面预想的不太一样，第一行和第二行之间，出现了莫名的间距。
为了更好的展示我当时有问题的代码，我把示例代码简化成了这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.item {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
font-weight: bold;
}
.item:nth-child(1) {
background-color: cornflowerblue;
}
.item:nth-child(2) {
background-color: lightblue;
}
.item:nth-child(3) {
background-color: pink;
}
.item:nth-child(4) {
background-color: lightgreen;
}
</style>
<title>Flexbox Wrap 案例分享</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>仔细看没毛病啊，我也没有设置对齐方式什么的，这个间距是哪儿来的呢？
解决办法
我想，我可能是对 flex 还是不够了解。我翻阅了MDN 文档关于flex-wrap的描述，也没有发现端倪。
我通过G 字头的搜索引擎，查询关键词flex-wrap 出现间距 ，得到的第一个结果，就是我想要的答案。
答案其实很简单，一行代码就能搞定，在父盒子上，加一行代码可以搞定：
align-content：flex-start;这样设置，是从起始点开始放置 flex 子元素，而align-content的默认值是stretch，会让元素均匀分布，这样就导致了元素之间出现了间隙。
另外我发现，如果我不设置高度，子元素换行是不会有这个垂直间隙的，而我正好设置了父容器盒子的高度。
总的来说就是，flex-wrap +父盒子高度设置，致使我落入了align-content 的陷阱。
小插曲
我在寻找align-content 默认值出处的时候，翻阅了 MDN 文档，发现文档描述的初始值是 normal 而不是stretch
而 W3C 的官方文档，写的align-content 默认值是stretch。
两个都是业内非常权威的文档，却因为这个属性，出现了不一致的描述。为了验证下，我在浏览器用审查元素，查看了下父容器盒子的计算属性，发现默认值是 normal。
tips：一开始看不到这么多的属性，选中
Show all即可查看全部计算后属性。
我又问了下AI助手，给出的解释是，大部分情况下这二者表现差异不大，几乎可以等同。
这样一来就清楚了，无论align-content 的默认值是哪个，都会对有高度的容器内的子元素进行拉伸排布。
flex 布局属性
问题解决了，让我们来复习一下flex-wrap和align-content的属性。
flex-wrap
flex-wrap 属性定义了当一行容不下所有子元素时，如何进行换行。它有三个可能的值：
nowrap（默认）：所有子元素将在一行中排列。wrap：子元素会在必要时换行。wrap-reverse：子元素会在必要时换行，但新行会排列在上一行的上方。
align-content
align-content 属性在有多行时，用于定义这些行在容器内的排列方式。常用值包括：
flex-start：所有行位于容器的顶部。flex-end：所有行位于容器的底部。center：所有行位于容器的中央。space-between：行之间的间距相等，首行和末行紧贴容器边缘。space-around：行之间的间距相等，首行和末行与容器边缘有一半的间距。stretch（默认）：行将拉伸以填满容器的高度。
总结
通过这篇文章，想必你对使用 flex-wrap: wrap 后元素之间意外间距出现的原因非常熟悉了，下次遇到你就知道可以通过设置 align-content 属性来解决这一问题。
Flexbox布局模式提供了强大的功能和灵活性，但要充分利用它，我们需要深入理解其属性和行为。在实践过程中，我们需要通过不断尝试和调试，才能够更好地掌握Flexbox的使用技巧，从而创建出更为灵活和美观的网页布局。
希望这篇文章能够帮助你解决实际开发中的问题，同时对Flexbox布局有更深入的理解。如果你有任何疑问或建议，欢迎在评论区与我交流讨论哦。
参考
flex-wrap: wrap 之后元素上下间距过大怎么解决？_消除display: flex; 上下间距-CSDN博客
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。