当我们构建一个网站或者应用程序时，我们经常需要一个能够适应不同屏幕尺寸及分辨率的布局。同时，我们希望这个布局能够简单、灵活和易于维护。
在这篇文章中，我们将会学习如何使用 CSS Grid 和 Flexbox 来创建一个响应式布局。我们会介绍如何使用这两种最常用的 CSS 布局方式，以及如何让它们共同协作来创建复杂的布局。最后，我们会演示如何将这些技术用于实际项目中。
CSS Grid 布局
CSS Grid 布局是一种强大的布局方式，它可以轻松地创建复杂的网格布局。它使用一个 2D 网格来排列元素，并提供了强大的控制权，使我们可以精确地定义每一个网格单元的大小和位置。CSS Grid 布局几乎可以完全取代以前的布局方式，比如浮动和定位等，因为它能够更简单地管理元素之间的空间和位置。
下面是一个简单的 CSS Grid 布局示例，我们需要创建一个网格，其中包含三个相同大小的网格单元：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}这个布局将会创建一个包含三列的网格布局，每一列的宽度相等，并且在列之间有 20 像素的间隔。
我们还可以配合使用其他 CSS 属性，比如 grid-template-rows （定义每一行的高度）和 grid-template-areas （定义网格中每一个区域的名称）等，以达到更加灵活的控制效果。
Flexbox 布局
Flexbox 布局是一种专门用于布局一维（一条直线上）元素的方式，它使用一个“弹性盒子”来包含一行或一列的元素。Flexbox 布局非常适用于创建响应式设计和对齐项目方面的工作，因为它可以随着屏幕尺寸的变化，自动调整并对齐元素。
下面是一个简单的 Flexbox 布局示例：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}这个布局将会创建一个包含多个项目的弹性盒子，其中项目之间的间距将会相等。 justify-content: space-between 属性使得项目在两侧对齐，并且它们之间的空白间距相等。align-items: center 属性则将这些项目在垂直方向上居中。
Flexbox 布局同样支持更多的属性，比如 flex-direction （定义弹性盒项目的排列方向）和 flex-wrap （决定是否换行）等。
使用 CSS Grid 和 Flexbox 的响应式布局
虽然 CSS Grid 和 Flexbox 布局可以分别使用，但是更好的方式是将它们结合使用。使用这两种布局方式，我们可以创建出极其复杂的网页布局，并且可以完美地适应各种大小的设备。
以下是我们可以使用 CSS Grid 和 Flexbox 布局相结合的一个示例：
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>
我们将会为这个容器使用 CSS Grid 布局，并在其内部再添加一个弹性盒子。这个弹性盒子将会包含三个项目，分别为 header、sidebar 和 content。
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ----- ----
------------------- ---- --- -----
--------------------
------- -------
-------- --------
------- --------
------- ------
-
---------- - ------- -
---------- -------
-
---------- - -------- -
---------- --------
-
---------- - -------- -
---------- --------
-------- -----
--------------- -------
-
---------- - ------- -
---------- -------
-这个布局将会创建出一个包含 header、sidebar、content 和 footer 的网页布局。header 和 sidebar 的宽度都是我们手动指定的，而 content 将会占据剩下的空间。每一个项目都被放在了它自己对应的区域，而这些区域的大小和位置则由 CSS Grid 布局所决定。
content 是一个弹性盒子，而它里面的项目是通过 Flexbox 布局进行排列的。在自适应设备上，这个布局将会自动适应不同的屏幕尺寸。
结论
CSS Grid 和 Flexbox 布局是响应式设计的关键工具。它们可以轻松地创建复杂的网页布局，而且易于维护和修改。在不同的布局场景下，我们可以根据需要选择不同的布局方式，并通过它们相互协作来构建复杂的布局。现在，你可以开始使用这些技术来改进自己的网站或应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6708aa1dd91dce0dc87372a5