在前端开发中，经常需要使用布局来排版网页。在布局中，等高三栏布局是一种常见的布局方式。在本文中，我们将介绍如何使用 CSS Flexbox 来实现等高的三栏布局。
Flexbox 概述
CSS Flexbox 是一种用于布局的 CSS 模块。它通过将容器元素中的子元素排列为一行或一列，从而实现灵活的布局。Flexbox 拥有以下几个主要的术语和概念：
- Flex Container：容器元素，包含了一组子元素。通过
display: flex属性来将一个 HTML 元素设置为 Flex Container。 - Flex Items：容器元素中的子元素。
- Main Axis：主轴，是 Flex Container 中子元素排列的方向，可以是水平方向（row）或垂直方向（column）。
- Cross Axis：交叉轴，与主轴垂直的方向。
实现等高的三栏布局
在等高三栏布局中，三列的高度应该相同。一般情况下，我们可以通过将三列的高度设置为相同的值来实现这种布局。但是，在某些情况下，我们需要让三列的高度能够根据内容自适应变化，然后再将它们的高度设置为最大值。这种情况下，CSS Flexbox 就可以派上用场了。
HTML 结构
首先，我们需要定义一个 Flex Container，然后在这个容器中添加三个 Flex Items。HTML 代码如下所示：
-- -------------------- ---- -------
---- ------------------
---- -------------
----------------
------
---- -------------
----------------
-----------------
------
---- -------------
----------------
-----------------
-----------------
------
------CSS 样式
接下来，我们需要使用 CSS Flexbox 来实现等高的三栏布局。首先，我们需要将容器元素设置为 Flex Container，然后需要设置主轴方向为水平方向（row）。CSS 代码如下所示：
.container {
display: flex;
flex-direction: row;
}接着，我们需要设置三列的宽度，并将它们的 flex-grow 属性设置为 1。flex-grow 属性定义了一个 Flex Item 的扩展因子，用于指定其在自由空间中所占的比例。在本例中，我们将三列的 flex-grow 属性都设置为 1，这意味着它们将平均分配剩余空间。CSS 代码如下所示：
.item {
width: 33.33%;
flex-grow: 1;
}最后，我们需要将 Flex Items 的高度设置为 100%，这样它们就会自适应容器中的空间。CSS 代码如下所示：
.item {
width: 33.33%;
flex-grow: 1;
height: 100%;
}完整的 CSS 代码如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- - ----- - ------ ------- ---------- -- ------- ----- -
结果展示
通过以上的代码实现，我们已经成功的实现了一个等高的三栏布局。代码演示效果如下图所示：
总结
CSS Flexbox 是一种灵活的布局方式，能够帮助我们实现各种各样的布局效果。在本文中，我们介绍了如何使用 CSS Flexbox 来实现等高的三栏布局，并给出了相应的 HTML 和 CSS 代码。希望这篇文章能够对您今后的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f78d0980a9b385b8f24ba