随着前端技术的不断发展和新特性的引入，Flexbox 布局在前端开发中日渐流行。Flexbox（Flexible Box Layout Module，弹性盒子布局模型）是 CSS3 中的一个布局模块，主要用来解决基于盒模型的布局问题。它可以实现多种灵活的布局方式，特别是在实现多列不等高和列数自适应布局方面表现突出。
多列不等高布局
在传统的布局方式中，实现多列不等高布局通常需要设置浮动或使用 clear 样式。但这种方式容易出现奇怪的布局问题并且难以维护，而使用 Flexbox 则可以轻松实现多列不等高布局。
实现多列不等高布局的关键在于将每个列的高度设置为 auto，这样列的高度就会自动根据其内部内容的高度调整。同时，设置 Flexbox 的父元素为 display:flex 即可实现子元素的自适应排列。
示例代码如下：
<div class="container"> <div class="item">第一列<br>第一列<br>第一列</div> <div class="item">第二列<br>第二列<br>第二列<br>第二列</div> <div class="item">第三列<br>第三列</div> </div>
.container {
display: flex;
justify-content: space-between;
}
.item {
flex-basis: 30%;
}在上述代码中，我们设置了一个包含三个子元素的父元素 .container，并将其设置为 Flexbox 布局。每个子元素 .item 的宽度使用 flex-basis 属性设置为 30%。布局效果如下图所示：
列数自适应布局
在实现列数自适应布局时，我们希望子元素能够根据屏幕宽度的变化自动适应列数。使用 Flexbox 可以轻松实现这一需求，我们只需要设置 flex-wrap: wrap 属性让子元素自动换行即可。
示例代码如下：
// javascriptcn.com 代码示例 <div class="container"> <div class="item">第一列</div> <div class="item">第二列</div> <div class="item">第三列</div> <div class="item">第四列</div> <div class="item">第五列</div> <div class="item">第六列</div> <div class="item">第七列</div> <div class="item">第八列</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
flex-basis: 200px;
height: 100px;
margin: 10px;
}在上述代码中，我们设置了一个包含八个子元素的父元素 .container，并将其设置为 Flexbox 布局。子元素的宽度使用 flex-basis 属性设置为 200px，高度设置为 100px，并通过 margin 属性设置了子元素之间的间距。布局效果如下图所示：
总结
在使用 Flexbox 布局时，多列不等高和列数自适应布局是常见的需求，通过合理的设置各种属性，我们可以轻松地实现这些布局效果。相比传统的布局方式，使用 Flexbox 可以让我们的布局更加灵活，而且易于维护和书写。因此，熟练掌握 Flexbox 布局对于前端开发人员来说是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6536343b7d4982a6ebe22030