在前端开发中，实现两栏布局是非常常见的需求。而在两栏布局中，有时候需要让两栏在一定条件下换行，这就需要用到 CSS Flexbox 布局。本文将详细介绍如何利用 CSS Flexbox 实现两栏换行布局，并提供示例代码。
什么是 CSS Flexbox 布局
CSS Flexbox 布局是一种新的布局方式，它可以让容器中的元素按照一定的规则排列，同时可以灵活地调整元素的大小和位置。它的主要特点包括：
- 简单易用：只需要设置容器的 display 属性为 flex，就可以启用 Flexbox 布局。
- 灵活性强：可以在容器中任意排列元素，同时可以动态调整元素的大小和位置。
- 响应式设计：可以根据不同的屏幕大小和设备类型，自动调整布局，适应不同的设备。
在实现两栏换行布局时，我们需要用到 Flexbox 布局中的 flex-wrap 属性。该属性用于控制元素在容器中的换行方式，有以下几个取值：
- nowrap：默认值，元素不换行，如果容器宽度不足，元素会被压缩。
- wrap：元素在容器中自动换行，第一行在上方。
- wrap-reverse：元素在容器中自动换行，第一行在下方。
在实现两栏换行布局时，我们可以将容器的 flex-wrap 属性设置为 wrap，然后将两个栏目分别放在两个 div 中，再将这两个 div 放在容器中。具体实现代码如下：
-- -------------------- ---- -------
---- ------------------
---- -------------------------------
---- --------------------------------
------
-------
---------- -
-------- -----
---------- -----
-
------------ -
----- --
-
------------- -
----- --
-
--------在上述代码中，我们将容器的 display 属性设置为 flex，将 flex-wrap 属性设置为 wrap，这样就可以实现两栏换行布局。同时，我们将两个栏目分别放在两个 div 中，并将它们的 flex 属性设置为 1，这样它们就会按照相等的比例占据容器的宽度。
示例代码
下面是一个完整的示例代码，可以直接复制到 HTML 文件中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
---------- -
-------- -----
---------- -----
----------------- --------
-------- -----
-
------------ -
----- --
----------------- --------
-------- -----
------- -----
-
------------- -
----- --
----------------- --------
-------- -----
------- -----
-
--------
-------
------
---- ------------------
---- --------------------
--------------
------------
------
---- ---------------------
--------------
------------
------
------
-------
-------在上述示例代码中，我们将容器的背景色设置为 #f0f0f0，将左栏目的背景色设置为 #e0e0e0，将右栏目的背景色设置为 #d0d0d0，这样可以更清晰地看到布局的效果。同时，我们还给两个栏目分别添加了标题和内容，这样可以更直观地看到布局的效果。
总结
本文介绍了如何利用 CSS Flexbox 实现两栏换行布局，同时提供了示例代码。通过学习本文，读者可以掌握 Flexbox 布局的基本用法，了解如何实现灵活的布局效果。同时，读者还可以通过修改示例代码，尝试实现更复杂的布局效果，提高自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660515b1d10417a2222a6da8