引言
在现代的 Web 开发中，响应式布局已经成为了常规操作。而实现响应式布局最常见的方式之一是分栏布局。本篇文章将要介绍如何使用 Flexbox 来实现一个响应式的分栏布局。
什么是 Flexbox？
Flexbox（英文全称：Flexible Box Layout）是一种用于页面布局的 CSS3 弹性盒模型。它允许容器中的子元素可以以自由的方式排列，自适应父容器的大小、屏幕尺寸和设备方向等。
Flexbox 布局的核心概念
在使用 Flexbox 布局时，有几个关键的概念需要理解：
**Flex Container（弹性容器）：**将 flexbox 应用于元素的容器，它的作用是将子元素变成弹性项目。
**Flex Item（弹性项目）：**flexbox 容器中的每个子元素。
**Main Axis（主轴）：**弹性容器的主方向，从容器的起始位置到结束位置。
**Cross Axis（交叉轴）：**垂直于主轴的轴线。
**Flex Direction（主轴方向）：**弹性容器中主轴的方向。
**Flex Wrap（换行）：**控制弹性容器内的弹性项目是否换行。
**Justify Content（主轴对齐方式）：**用来定义弹性项目在主轴上的对齐方式。
**Align Items（交叉轴对齐方式）：**用来定义弹性项目在交叉轴上的对齐方式。
**Align Content（多根轴线对齐方式）：**当 flex-wrap 属性设置为 wrap 时，该属性定义了浏览器应该如何在弹性容器的多行上对齐项目。
应用 Flexbox 实现分栏布局
现在让我们来使用 Flexbox 实现一个响应式的分栏布局。在这个例子中，我们将会使用 Flexbox 属性分别控制两列，左侧列占用三分之一的宽度，右侧列占据剩余宽度。
我们首先需要 html 结构，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
-------------- --------------
-------
---------- -
-------- -----
-
------------ -
------ -------
----------------- --------
-------- -----
-
------------- -
----------------- --------
-------- -----
-
--------
-------
------
---- ------------------
---- ------------------------------
---- -------------------------------
------
-------
-------在上面的代码中，我们创建了一个带有 .container 类名的块级元素。在 CSS 中，我们将其转换为一个 Flexbox 容器，用 .left-column 和 .right-column 类名来定义两个栏目。
然后，我们将 .left-column 的宽度设置为 33.33%，也就是容器宽度的三分之一，右侧的剩余宽度将自动分配给 .right-column。
现在，我们在浏览器中查看页面，左侧栏目运用了我们设置的 width 宽度，而右侧栏目占据了右侧所有的空间。
到目前为止，这个布局还不是响应式的。下面，我们将使用 Flexbox 的 flex-wrap 属性来使其响应式。
Flexbox 的 flex-wrap 属性
flex-wrap 属性允许我们控制 flexbox 容器中的弹性项目是否换行。默认情况下，弹性项目不会换行，即使在小屏幕下也不会换行。我们可以通过设置 flex-wrap 为 wrap 来让弹性项目自动换行。
在我们的示例中，我们可以将 .container 的 flex-wrap 属性设置为 wrap，这样当屏幕尺寸变小到一定程度，左侧栏目就会自动换行。
.container {
display: flex;
flex-wrap: wrap;
}现在，当页面宽度变窄时，左侧栏目将自动换行，而不是被迫缩小到无法阅读的程度。
总结
在本文中，我们介绍了 Flexbox 布局的主要概念和一些关键的属性，展示了如何使用 Flexbox 实现一个简单的响应式分栏布局。通过灵活运用 Flexbox 属性，我们可以轻松创建丰富、优雅、响应式的 Web 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e5b3848841e9894e13ae5