在前端开发中，布局无疑是最重要的一部分。而在响应式布局中，CSS Grid 和 Flexbox 都是比较流行的选择。那么这两种布局方式有什么区别呢？本文将对此进行详细的介绍，并给出相应的示例代码。
CSS Grid
CSS Grid 是一种二维网格布局方式，它可以让开发者将一个容器分成行和列来进行布局。它最大的优势在于其强大的布局控制能力，开发者可以通过它来自由控制子元素的位置、大小等属性。
使用方式
我们可以通过如下代码来创建一个简单的网格布局：
---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- -
上述代码中，我们首先将父元素设置为一个网格容器，然后通过 grid-template-columns 和 grid-template-rows 分别指定了网格的列数和行数。其中 repeat(3, 1fr) 表示将容器分为三列，并使每列的宽度平均分配。同样地，repeat(3, 100px) 表示将容器分为三行，每行的高度为100像素。
响应式改变
由于 CSS Grid 可以实现对子元素的自由控制，因此它非常适合响应式布局。我们可以通过在 CSS 中添加媒体查询来根据不同的屏幕大小，对 Grid 布局进行适配。
如下代码展示了如何在响应式的两个屏幕大小下，实现不同的布局效果：
------ ------ --- ----------- ------ -
---------- -
---------------------- --------- -----
------------------- --------- -------
-
-
------ ------ --- ----------- ------- -
---------- -
---------------------- --------- -----
------------------- --------- -------
-
-上述样式中，我们使用了两个媒体查询，分别为屏幕宽度大于等于768像素和屏幕宽度大于等于1024像素时。在对应的媒体查询下，我们通过修改网格的列数和行数，实现了不同的网格布局效果。
Flexbox
与 CSS Grid 不同，Flexbox 是一种一维布局方式，它将容器内的子元素排成一排或一列，使它们可以在可用空间内进行尽可能良好的分布。Flexbox 最常用的场景是，将容器内的子元素水平或垂直居中。
使用方式
我们可以在容器上添加 display: flex 属性来使它成为 Flexbox 布局容器。我们可以通过如下代码来创建一个简单的 Flexbox 布局：
---------- - -------- ----- ---------------- ------- ------------ ------- -
上述代码中，justify-content 属性用于沿容器的主轴方向对子元素进行对齐，这里使用 center 选项将子元素居中。align-items 属性用于沿容器的交叉轴方向对子元素进行对齐，这里使用了 center 选项将子元素在交叉轴方向上居中。
响应式改变
与 CSS Grid 类似，我们也可以通过在 Flexbox 中使用媒体查询，根据不同的屏幕宽度，对布局进行适配。
如下代码展示了如何在响应式的两个屏幕大小下，实现不同的布局效果：
------ ------ --- ----------- ------ -
---------- -
--------------- ----
---------------- --------------
------------ ---------
-
-
------ ------ --- ----------- ------- -
---------- -
--------------- -------
---------------- -------
------------ -------
-
-上述样式中，我们对同样的两个屏幕大小，使用了两个媒体查询。在对应的媒体查询下，我们通过修改 flex-direction 属性、以及 justify-content 和 align-items 属性，实现了不同的 Flexbox 布局效果。
对比
虽然 CSS Grid 和 Flexbox 都可以实现响应式布局，但它们的使用场景和优势不尽相同。
- CSS Grid 更适合进行网格布局，它可以让开发者自由控制子元素的位置和大小，并可以实现更复杂的布局效果。
- Flexbox 更适合进行一维的布局，它可以将容器内的子元素排成一排或一列，并用于实现水平或垂直居中等效果。
为了更好地理解这两种布局方式之间的区别，我们可以通过下图进行对比：
结论
无论是 CSS Grid 还是 Flexbox，它们都可以实现响应式布局，使开发者能够灵活地适应不同的屏幕尺寸。在选择使用哪种布局方式时，应根据实际的布局需求进行选择，尽可能地发挥它们各自的优势。
参考文献
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- CSS Grid Layout and Responsive Design: Tutorial and Examples
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719bd6997b3dddf676729ba