随着移动设备的普及，响应式设计已经变得越来越重要。而栅格布局是响应式设计中非常常用的一种布局方式，它可以让我们方便地在不同屏幕尺寸下排版。
在本文中，我们将介绍如何使用 CSS Flexbox 实现一个响应式的栅格布局。
CSS Flexbox 简介
CSS Flexbox 是一种用于定位和排版元素的布局模型，通过指定父容器的属性来决定子元素的排版方式。Flexbox 有以下几个主要概念：
flex container：父容器，指定 display:flex 或 display:inline-flex 属性
flex item：子元素，直接包含在父容器内
main axis：主轴，flex container 的默认方向，可以是水平（row）或垂直（column）
cross axis：交叉轴，垂直于主轴的轴线
flex direction：flex container 指定主轴方向的属性，可以是 row、row-reverse、column 或 column-reverse。
flex wrap：当 flex items 超出 flex container 的宽度时，控制 flex items 的换行方式，可以是 nowrap（不换行）、wrap（从下一行开始）或 wrap-reverse（从上一行开始）
align-items：控制 flex items 在交叉轴上的对齐方式，可以是 flex-start（靠近交叉轴起点）、flex-end（靠近交叉轴终点）、center（居中）、baseline（基线对齐）或 stretch（拉伸对齐）
justify-content：控制 flex items 在主轴上的对齐方式，可以是 flex-start（靠近主轴起点）、flex-end（靠近主轴终点）、center（居中）、space-between（平均分布）、space-around（均分间距）或 space-evenly（更均匀的间距）
响应式栅格布局实现方法
现在我们已经了解了 Flexbox 的基本概念，我们可以开始使用它来实现响应式栅格布局了。
步骤一：创建 HTML 结构
我们的栅格布局需要有一个父容器和多个子元素，每个子元素代表栅格中的一个单元格。在 HTML 中，我们可以这样创建一个带有 12 个单元格的栅格布局：
-- -------------------- ---- ------- ---- ------------ ---- --------------------- ---- --------------------- ---- --------------------- ---- --------------------- ---- --------------------- ---- ---------------------- ---- ---------------------- ---- --------------------- ---- --------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------
其中，父容器有一个类名为 “row”，每个子元素的类名有两部分，第一部分为 “col”，第二部分为 “n”，n 表示这个单元格要占据栅格中的几份。在上面的例子中，我们使用了一个 12 栅格布局，并将第 1、2、3 个单元格各占据了 4 个栅格（即占据总体的 33.33%），第 4、5 个单元格各占据了 6 个栅格（即占据总体的 50%），第 6、7 个单元格各占据了 12 个栅格（即占据总体的 100%），第 8、9 个单元格各占据了 6 个栅格，第 10、11、12 个单元格各占据了 4 个栅格。
步骤二：添加 CSS 样式
为了实现响应式栅格布局，我们需要为父容器添加以下 CSS 样式：
.row {
display: flex;
flex-wrap: wrap;
}这样可以将栅格中的子元素换行，如果子元素的数量和宽度不足以在一行中排列，它们将被自动放到下一行。
接下来，我们需要为子元素添加 CSS 样式：
-- -------------------- ---- -------
--------------- -
----------- -----------
-------- -----
------- --- ----- -----
-
------ ------ --- ----------- ------ -
--------- -
----------- -------
-
--------- -
----------- ----
-
---------- -
----------- -----
-
-在上面的 CSS 样式中，我们将所有类名以 “col-” 开头的元素都设置了盒模型为 border-box 和内边距 15px，并设置了一个 1px 灰色边框。
接着，我们使用媒体查询，当屏幕宽度为 768px 或以上时改变列的宽度为响应式宽度。
步骤三：添加浏览器兼容性
虽然现代浏览器都支持 Flexbox，但我们仍然需要为旧版浏览器添加兼容性。我们可以添加以下样式来满足跨浏览器兼容性：
-- -------------------- ---- ------- ---- - -------- ------------ -------- ------------- -------- ------------ -------- ----- -------------- ----- ---------- ----- - --------------- - -------- ------------ -------- ------------- -------- ------------ -------- ----- -
这样可以在更老的浏览器上实现相同的效果。
示例代码
下面是最终的示例代码，它可以实现一个 12 栅格响应式栅格布局：
-- -------------------- ---- -------
----------------
---- ------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------- ------------------
---- ------------- ------------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ ------------------
---- ------------ ------------------
---- ------------ ------------------
------
-------
---- -
-------- ------------
-------- -------------
-------- ------------
-------- -----
-------------- -----
---------- -----
-
--------------- -
----------- -----------
-------- -----
------- --- ----- -----
-------- ------------
-------- -------------
-------- ------------
-------- -----
-
------ ------ --- ----------- ------ -
--------- -
------------------- -------
------------------------ -------
----------- -------
-
--------- -
------------------- ----
------------------------ ----
----------- ----
-
---------- -
------------------- -----
------------------------ -----
----------- -----
-
-
--------总结
在本文中，我们介绍了如何使用 CSS Flexbox 实现一个响应式的栅格布局。通过设置父容器的 Flexbox 属性和媒体查询可以很方便地实现不同尺寸的屏幕上的布局效果。同时，CSS Flexbox 还具有很高的浏览器兼容性，可以在多种浏览器和设备上实现相同的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65214a2895b1f8cacd8cebb1