CSS Flexbox 布局技巧：使用 flex-wrap 实现等高布局

概述

在网页布局过程中，我们常常遇到一种情况：多个元素需要在同一行中并排放置，且这些元素高度不一，这时候就需要实现等高布局。CSS 的 Flexbox 布局是实现等高布局的一种很好的方式，而 flex-wrap 属性可以控制元素的换行。本文将介绍如何使用 flex-wrap 属性实现等高布局。

使用方法

在 Flexbox 布局中，默认为不允许元素换行，所有元素都被挤在一行里，当一行放不下时，Flexbox 会自动缩小元素。但是在实际中，我们可能需要设置元素能够换行，让多余的元素能够完成等高布局，这时候就需要使用 flex-wrap 属性。

flex-wrap 属性有三个取值：nowrap(默认不换行)、wrap(允许换行)、wrap-reverse(允许换行且反向)。其中，wrap 取值能够实现等高布局。

示例代码

HTML 代码：

// javascriptcn.com 代码示例
<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 class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

CSS 代码：

// javascriptcn.com 代码示例
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 30%;
    height: 150px;
    background-color: #ccc;
    margin-bottom: 20px;
}

以上代码中，我们使用了 Flexbox 布局，并设置 flex-wrap 属性为 wrap，即允许元素换行。我们还设置了 justify-content 属性为 space-between，使得元素在容器中均匀分布，从而实现等高布局。

总结

使用 CSS 的 Flexbox 布局实现等高布局，可以很好地解决多个元素高度不一的问题。在实现时，我们需要使用 flex-wrap 属性控制元素的换行，从而实现等高布局。此外，我们还可以结合其他的 Flexbox 属性，如 justify-content 属性等，实现不同的布局效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a72ed7d4982a6ebcc8670