在前端开发中，响应式布局是一个非常重要的话题。如何在不同的屏幕尺寸、设备类型和浏览器中实现优秀的布局效果，是一个需要掌握的技能。这篇文章将会介绍使用 CSS Flexbox 布局实现响应式双列排版的方法。
什么是 CSS Flexbox 布局？
CSS Flexbox 布局（简称 Flexbox）是一个指定每个元素如何分配空间的新型布局模式。通过使用 Flexbox，我们能够轻松地实现任意方向、任意数量的元素布局，并能够支持自适应和响应式效果。
Flexbox 最好的特点是它能够帮助我们避免许多传统布局中常见的问题，如水平居中、竖直居中、等高列、紧凑布局等。同时它也能够适应各种设备上的不同屏幕尺寸，并允许我们通过设置一些弹性属性对布局进行优化。
使用 CSS Flexbox 实现响应式双列排版
双列布局是一个非常常见的布局，可以用来展示各种内容，如文章列表、产品列表等。在设计上，如果没有特别说明，我们一般希望左边的列比右边的列略宽。在传统的布局模式中，一般需要使用 float 或者 display:inline-block 实现双列布局，然而这些方法都会有许多问题，如无法保持等高，需要清除浮动等。但使用 CSS Flexbox 布局，实现双列布局变得非常快捷和简单。
HTML 结构
---- ------------------
---- ----------------------
---- ----------------------
------首先，我们需要一个包含两个 div 的容器，每个 div 分别代表左边的列和右边的列。
CSS 样式
为了实现响应式效果，我们需要设置一些关键的 Flexbox 属性。我们需要将容器的 display 属性设置为 flex，这会将容器的子元素变为 Flexbox 元素：
---------- -
-------- -----
-接下来，我们需要设定子元素的宽度和弹性属性。为了让左边的列比右边的列宽，我们可以设置它的宽度为 3/4，右边的列则为 1/4。同时，我们需要使子元素具有相同的高度，这可以通过设置 flex-basis 和 flex-grow 属性来实现：
-------- -
----------- ----
---------- --
-
-------- -
----------- ----
---------- --
-最后，我们需要考虑，如果用户的屏幕尺寸变化，该如何适应布局。为了实现自适应和响应式效果，我们可以使用媒体查询来覆盖特定的宽度范围。我们将容器的 flex-direction 属性设置为 column，这样它将自动转换为双列布局：
------ ------ --- ----------- ------ -
---------- -
--------------- -------
-
-完整代码
--------- -----
------
------
-------
---------- -
-------- -----
-
-------- -
----------- ----
---------- --
-
-------- -
----------- ----
---------- --
-
------ ------ --- ----------- ------ -
---------- -
--------------- -------
-
-
--------
-------
------
---- ------------------
---- ----------------------
---- ----------------------
------
-------
-------结论
CSS Flexbox 布局能够非常快捷和方便地实现双列布局，同时还能够支持自适应和响应式效果。最好的是，使用 Flexbox 布局可以避免许多传统布局中常见的问题。因此，我建议在未来的项目中试一试使用 Flexbox 布局，以实现精美的响应式布局效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673586330bc820c5824ee7e4