什么是Flexbox？
Flexbox是CSS3中一种实现网页布局的方式，它提供了更加方便和灵活的布局方式，可以简化网页布局的代码，同时也能够解决很多传统布局方式可能会出现的布局问题，比如缝隙问题。
什么是布局中的缝隙问题？
在传统的网页布局方式中，一般通过把元素设置成浮动的方式来实现网页的布局，但是这种方式可能会出现元素之间的间隙空白或者排版错乱等问题，尤其是在元素高度不一的情况下，这种缝隙问题就尤其明显。
比如下面这个例子，我们需要让9个小方块宽度自适应，并且要求每行最多放3个小方块，然后在每行最后一个小方块之后要求换行。
// javascriptcn.com 代码示例 <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>
.box {
width: 30%;
height: 50px;
background-color: #f00;
margin: 5px;
float: left;
}这种情况下，在不同浏览器中，很有可能会出现排版错乱的情况，如下图所示：
其中黑色线条标识出了浮动元素之间的空白间隔，这就是缝隙问题。
CSS Flexbox如何解决缝隙问题？
CSS Flexbox是一种新的网页布局方式，它提供了更加方便的方式来实现网页布局，并且可以解决很多传统布局方式可能会出现的布局问题，包括缝隙问题。
Flexbox的原理是通过在容器元素上设置display: flex;或display: inline-flex;来创建一个flex容器，然后在容器内部的元素上设置对应的flex属性，实现网站布局。
在上面的例子中，我们可以通过Flexbox来解决缝隙问题，具体实现如下：
// javascriptcn.com 代码示例 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 0 0 calc(30% - 10px);
height: 50px;
background-color: #f00;
margin: 5px;
}在这个例子中，我们通过把所有小方块放在一个容器内部，并在容器上设置display: flex;，同时设置flex-wrap: wrap;来使小方块在到达容器的边界后自动换行。
同时，在小方块上设置flex: 0 0 calc(30% - 10px);，表示小方块成为flex项目，设置它的“增长因子”，“缩小因子”和基础大小，通过计算保证每行放置3个小方块，并在每个小方块之间留出5px的间距。
运行结果如下：
可以看到，在使用CSS Flexbox布局之后，元素之间的缝隙问题已经得到了解决。
总结
CSS Flexbox是CSS3中一种实现网页布局的方式，它提供了更加方便和灵活的布局方式，可以简化网页布局的代码，同时也能够解决很多传统布局方式可能会出现的布局问题，包括缝隙问题。在使用Flexbox布局时，我们需要在容器元素上设置display: flex;或display: inline-flex;，然后在容器内部的元素上设置对应的flex属性，实现网站布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a242d7d4982a6ebc7edf2