什么是 Flexbox？
Flexbox，也被称为弹性盒模型，是 CSS3 中新引入的一种布局方式。它可以让我们更轻松地实现复杂的页面布局，同时还能更好地适应各种设备的屏幕大小。
如何用 Flexbox 实现三栏布局？
三栏布局通常是指一个主栏目，以及两个侧栏。这是一个常见的布局方式，可以用来实现博客、新闻门户等网站的布局。接下来，我们将介绍如何使用 Flexbox 实现三栏布局。
首先，我们需要在 HTML 中定义三个容器，分别代表主栏、左侧栏和右侧栏。在 CSS 中，我们将这三个容器都设置为 display: flex;，这样它们就成为了弹性容器。接着，我们可以设置每个容器的宽度和背景颜色：
<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ---- ----------------- ----- - ----- - ------ ---- ----------------- ----- - ------ - ------ ---- ----------------- ----- -
现在，我们已经实现了三栏布局。但是，我们会发现侧栏并没有在页面中垂直居中显示。这是因为，Flexbox 默认是针对主轴（即水平方向）进行布局的，而不是针对交叉轴（即垂直方向）。为了让侧栏在页面中垂直居中，我们可以为它们设置 align-items: center;，这样它们就会在交叉轴上居中显示：
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ---- ----------------- ----- - ----- - ------ ---- ----------------- ----- ------------ ------- - ------ - ------ ---- ----------------- ----- ------------ ------- -
现在，我们已经成功实现了三栏布局。
如何对 Flexbox 进行进一步的布局控制？
除了刚刚介绍的几个属性外，Flexbox 还有许多其他有用的属性可以帮助我们更好地控制布局。下面是一些常用的属性：
justify-content：用于定义主轴上的对齐方式。flex-direction：用于定义主轴的方向。flex-wrap：用于定义元素是否应该换行。flex-grow：用于定义它们在父容器中占据的空间比例。
这些属性的使用方法可以在各种 CSS 文档和教程中找到。通过熟练掌握这些属性，我们可以更好地控制 Flexbox 布局，实现更复杂的页面布局。
总结
借助 CSS Flexbox，实现三栏布局可以变得非常简单，而且布局效果也比较符合我们的预期。在实际开发中，我们应该多加利用 Flexbox 的优点，学习并使用更多的布局属性，从而实现更好的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ace9f48841e98947bf862