前端界最流行的布局技术之一就是 Flexbox 了。它允许您以更便捷的方式控制容器内的各个项目位置。使用 Flexbox 布局始终是前端开发的一项必备技能，因为开发人员总是需要使用多种布局方式来设计解决各种复杂的问题。这篇文章将介绍如何使用 Flexbox 布局实现三栏布局及其变种。
简单的三栏布局
首先，让我们看一下实现最常见的三栏布局时如何使用 Flexbox。这种布局通常由一个固定宽度的左侧栏、一个固定宽度的右侧栏和一个自动填充的中心栏组成。下面是 CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - -------- - ------ ------ - ------------- - ----- -- - --------- ------------- - ------- --- ----- ----- -------- ----- -
在这个代码片段中，我们将容器的 display 属性设置为 flex，这将启用 Flexbox 布局。随后，justify-content 属性被设置为 space-between，这允许左右两栏各自置于容器的一侧。
接下来，在左、右侧的栏中设定一个固定的宽度，而中间的栏则使用 flex: 1 将其推入到容器的中央，以便其自动填充容器的剩余空间。最后，还将 .sidebar 和 .main-content 元素上的 border 和 padding 样式应用于增强可读性。至此，我们就完成了一个简单的三栏布局。
更高级的三栏布局
在上一个例子中，中间的栏是一个自动填充的 flex 项，但是，有时会出现左侧栏或右侧栏需要充满容器高度来适应某些特定的需求。下面是 CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------- ------ - -------- - ------ ------ ------- ----- - ------------- - ----- -- ------- ----- - --------- ------------- - ------- --- ----- ----- -------- ----- -
此代码与上一个示例类似，但是添加了一个额外的属性 height: 100vh，以充分利用可视窗口的高度。这将导致容器的高度等于视口的高度，而不受其余内容的影响。随后，左、右侧的栏中除了固定的宽度，还设定了 height: 100%，这将使它们填充容器的整个高度。
最后，还在 .sidebar 和 .main-content 元素中添加了 border 和 padding 样式来增强可读性。这样，就可以实现一个更高级的三栏布局。
另一种三栏布局
我们还可以另一种三栏布局方式。此处，我们将使左侧栏和右侧栏具有相同的宽度，而将中间栏分为两个相等的部分。下面是 CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- - --------- -------------- -------------- - ----- - - -- - --------- -------------- - ------ ---- - ------------- - ------ ---- - --------- -------------- -------------- - ------- --- ----- ----- -------- ----- -
这里，我们首先将容器的 display 属性设置为 flex，而 flex-wrap 属性设置为 wrap，这样将使至少有一个内容会被移到下一行。我们如此设置，是为了确保容器中所有元素都能够在其自身所需的宽度下正常预览。接下来，我们使用 justify-content 属性将其中的空间平均分配到各个项目之间。
此外，flex: 1 0 0 属性被应用到了所有元素上，这将使它们自动填充容器的剩余空间。然后，左、右侧栏会设置为相同的 30% 宽度，而中间栏将为 40% 的宽度。
最后，还附加了 .sidebar、.main-content 和 .extra-content 元素的 border 和 padding 样式，以增强可读性。这样就完成了另一种三栏布局的样式。
结论
本文介绍了如何使用 Flexbox 布局实现多个三栏布局的样式。Flexbox 布局的强大之处在于其通过各种属性（如 justify-content、flex-grow 和 flex-shrink）控制每个项目的大小和位置，这使得其极其灵活。
重要的是，您还必须考虑容器样式及其宽度和高度。以上样例展示了一些常见的三栏布局，但您可以根据您的具体需求来制定相应的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ab8e3a1ce006354a156b3