Flexbox 是 CSS3 的一个布局模式，可以很好地解决传统布局方式难以实现的问题，例如均分多列、不定宽高元素的布局等，更重要的是它能够帮助我们实现更灵活、响应式的布局。接下来，本文将带领大家通过实现经典的三栏布局来深刻理解 Flexbox 的能力。
什么是三栏布局
在 Web 开发中，三栏布局一般是指页面中左、中、右三栏内容分别占据整个屏幕宽度的三分之一，如下图所示：
虽然看起来布局简单，但是传统布局方式比如使用 float，position 等来实现都存在各种各样的问题，包括浮动造成的高度塌陷、元素之间的间隙调整等。使用 Flexbox 布局则可以解决这些问题，并带来更强大的布局控制能力。
Flexbox 布局基础
在实现三栏布局之前，我们需要先了解一些 Flexbox 布局的基础概念。
Flexbox 将容器（即包含元素的父元素）分为主轴和交叉轴两个方向，主轴是默认的左到右方向，而交叉轴则是垂直于主轴的方向。具体来说，下面是一些相关术语的定义：
- 主轴起点和终点：主轴的开始和结束位置，可以是水平方向的 left / right 或是垂直方向的 top / bottom。
- 主轴方向：沿着主轴的流动方向，分为水平（row）和垂直（column）两种。
- 交叉轴起点和终点：交叉轴的开始和结束位置，如果主轴是水平方向，那么交叉轴就是垂直方向。
- 交叉轴方向：垂直于主轴方向的方向。
通过这些基础概念，我们可以理解 Flexbox 的布局方式，在实际开发中更加灵活地运用。
实现三栏布局
接下来，我们按照以下步骤来实现一个基础的三栏布局：
- 创建一个 HTML 文件，并引入一个 CSS 文件
--------- -----
------
------
----- ---------------- -----------------
-------
------
---- ------------------
---- -----------------------
---- -------------------------
---- ------------------------
------
-------
-------- 在 CSS 文件中，为容器添加 Flexbox 布局
-- ----- ---- -- -- ---------- - -------- ----- -
这样，容器中的三个子元素就默认排列在一条主轴（水平方向）上，因此需要向右侧扩展。
- 设置侧栏和中间内容的宽度
需要调整宽度，使左右两侧各占据屏幕的 25% 宽度，中间则占据剩余宽度。同时，也需要给中间内容添加一些样式，让它与左右两侧分隔开来。
-- ---------- ---- ----- -- ------ ------ - ------ ---- - ------- - ----- -- ------------ --- ----- ----- ------------- --- ----- ----- -
这样，整个三栏布局就完成了。
灵活运用 Flexbox 布局
Flexbox 布局可以帮助我们实现各种灵活的布局方案，例如等分多列、垂直居中、按比例排列等等。下面是一些例子，供大家参考学习。
列等分
在实现列等分布局时，只需要设置容器为 display: flex，并为每个子元素添加 flex: 1，就可以让它们等分容器宽度。
---------- - -------- ----- - ---------- - --- - ----- -- -
垂直居中
如果需要实现垂直居中，则可以设置容器为 align-items: center，然后让内容区域占用整个容器高度即可。
---------- - -------- ----- ------------ ------- ---------------- ------- - ---------- - --- - ------- ----- -
按比例分配空间
如果需要按比例分配容器空间，那么可以在子元素中各自设置一个 flex-basis 属性来控制它们的初始宽度，再把它们加入同一个容器中并设置为 display: flex。
---------- - -------- ----- - ---------- - ---------------- - ----------- ---- - ---------- - ---------------- - ----- -- - ---------- - ---------------- - ----------- ---- -
总结
本文通过实现三栏布局为例，介绍了 Flexbox 布局的基础概念和使用方法。同时，也列举了一些灵活运用 Flexbox 布局的例子，希望能够对大家理解和掌握 Flexbox 布局提供帮助。
最后，附上完整的样式代码供大家参考：
---------- - -------- ----- - ------ ------ - ------ ---- - ------- - ------------ --- ----- ----- ------------- --- ----- ----- ----- -- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648d2bc948841e9894b78659