在前端开发中，常常会遇到需要实现等高布局的需求，如平铺展示图片、固定高度的卡片等。而传统的方法需要使用 JavaScript 或者计算高度来实现，而 CSS Flexbox 则可以轻松实现。
什么是 CSS Flexbox？
CSS Flexbox 是 CSS3 中的一个布局方式，全称为 Flexible Box Layout，中文名为弹性盒子布局，简称 Flex 布局。它可以实现任意一维度的弹性布局，适用于各种设备的屏幕尺寸和方向变化。Flexbox 布局具有的一些特性：
- 容器和项目之间是一维的，比如从左到右或从上到下；
- 容器可以控制项目在主轴（水平）或者交叉轴（垂直）上的对齐方式；
- 项目的大小可以基于容器的空间分配，且可以通过设置对齐、间隙和增大/缩小来调整。
实现等高布局的方法
在传统的 CSS 布局中，要实现等高往往需要绝对定位或使用 JavaScript 进行计算。而在 Flex 布局中则可以轻松实现。
Flex 布局的本质是容器与子元素之间的布局方式，所以我们需要先定义一个 Flex 容器，并将子元素放置在容器中。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
步骤一：定义容器的样式
首先我们需要为容器定义样式，并设置 display 属性为 flex。这会指定容器使用 Flex 布局方式。
.container {
display: flex;
}步骤二：设置子元素的样式
接下来，我们需要设置子元素的样式，这样我们可以控制它们的布局方式。在这里，我们需要设置所有子元素的高度相同，以达到等高的效果。可以使用 height 或者 min-height 属性来设置子元素的高度。
.item {
height: 200px;
width: 200px;
}步骤三：使用 flex-grow 属性
在设置子元素样式时，我们可以使用 flex-grow 属性指定每个子元素在主轴上所占的空间大小。默认情况下，这个值为 0，这意味着每个项目将使用其原始大小，而不是扩展以填充剩余的空间。我们可以将这个值设置为相同的数值，这样每个项目将平均分配剩余的空间。以下是设置 flex-grow 属性的示例：
.item {
flex-grow: 1;
}完整示例代码如下：
-- -------------------- ---- -------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
---------- -
-------- -----
-
----- -
------- ------
------ ------
---------- --
-
--------总结
CSS Flexbox 是实现等高布局的一种简单方法，在其中，我们可以使用 flex-grow 属性来控制子元素在主轴上所占的空间大小，从而实现等高的效果。通过使用 CSS Flexbox，我们可以轻松地实现各种类型的布局需求，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a695d148841e989433bdff