引言
在现代的 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，这样当屏幕尺寸变小到一定程度，左侧栏目就会自动换行。
---------- -
-------- -----
---------- -----
-现在，当页面宽度变窄时，左侧栏目将自动换行，而不是被迫缩小到无法阅读的程度。
总结
在本文中，我们介绍了 Flexbox 布局的主要概念和一些关键的属性，展示了如何使用 Flexbox 实现一个简单的响应式分栏布局。通过灵活运用 Flexbox 属性，我们可以轻松创建丰富、优雅、响应式的 Web 布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647e5b3848841e9894e13ae5