随着移动设备的兴起，响应式设计已经成为前端开发中不可或缺的一部分。而要实现一个优秀的响应式布局，恰好可以用到最近较为流行的 CSS Grid 和 Flexbox 这两个技术。
什么是 CSS Grid 和 Flexbox
CSS Grid 是一种二维布局方式，可以让我们以网格形式来分割页面，并控制子元素在这个网格内的位置。它的优点在于，复杂的布局可以轻松实现，比如说，要让某一列高度随着内容增加而增加，就可以用 CSS Grid 来实现。
而 Flexbox 则是一种一维布局方式，它通过 flex 容器和 flex 子项两个概念来控制布局。它的优点在于，可以轻松实现一些特定的布局，比如在一个列表中，让每个子项在垂直方向上居中显示。
基本概念和使用方式
CSS Grid
首先，我们需要理解一些基本的概念。
在一个网格布局中，我们需要为其定义一个网格容器，这个容器是使用 display: grid 来定义的。而容器中的每一个元素，则被称为网格项。
我们可以使用 grid-template-columns 和 grid-template-rows 来定义行和列的大小和数量，例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}其中，repeat(3, 1fr) 表示有三列，每一列的大小是相等的，并且大小占据整个容器的比例是相等的。而 repeat(3, 100px) 表示有三行，每一行的大小都是 100px。
然后，我们可以使用 grid-column 和 grid-row 来将一个网格项放到所需的网格单元中，例如：
.item1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}其中，1 / 2 表示从第 1 列到第 2 列，1 / 3 表示从第 1 行到第 3 行。
Flexbox
对于 Flexbox，我们同样需要了解一些基本的概念。
首先，我们需要将一个容器标记为 flex 容器，这需要使用 display: flex 来实现。然后，我们可以使用 flex-direction 来定义主轴的方向，目前主要有四个取值：row、row-reverse、column、column-reverse。
我们可以在容器上定义一些属性，比如 justify-content 和 align-items 来控制子项在主轴和副轴上的对齐方式。还有一个非常重要的属性 flex，它用来控制一个子项在所处容器中所占的比例。
例如，我们可以用下面的代码来实现一种侧边栏和内容区域的布局：
<div class="container"> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - -------- - ------ ------ ------------ -- ----------------- ----- - -------- - ----- -- ----------------- ------- -
其中，flex-shrink: 0 表示侧边栏不会自动缩小，而 flex: 1 表示内容区域会占据尽可能多的剩余空间。
实际应用
制作响应式菜单
-- -------------------- ---- -------
---- -------------
----
------ -----------------
-----
------ ------------------
-----
------ ---------------------
-----
------ --------------------
-----
-----
------------------------
-------- -------------------- ---- -------
----- -
-------- -----
---------------- --------------
------------ -------
----------------- -----
------ -----
-------- ---- -----
-
-- -
-------- -----
---------------- -----
------- --
-------- --
-
-- -
------- - -----
-
- -
------ -----
---------------- -----
-
------ ------ --- ----------- ------ -
----- -
--------------- -------
------------ -----------
-
-- -
----------- -----
--------------- -------
------------ -----------
-
-在此代码中，我们使用 Flexbox 来实现菜单的水平排列，使用媒体查询来控制菜单在不同大小的屏幕上的布局方式。
制作带有多列和自动换行的卡片布局
<div class="cards-container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> <div class="card">Card 5</div> <div class="card">Card 6</div> </div>
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------------- ---------------- ------------- ------ ------------------- --------- ----- ---- ----- - ----- - ----------------- ----- -------- ----- -
在此代码中，我们使用 CSS Grid 来实现卡片的多列和自动换行效果。使用 repeat(auto-fit, minmax(250px, 1fr)) 来自动将卡片容器适应当前的可用空间，且每个卡片的最小宽度为 250px。
总结
CSS Grid 和 Flexbox 在前端开发中扮演着非常重要的角色，它们可以帮助我们实现复杂的布局。然而，要真正做到熟练掌握这两种技术并不容易，需要需要我们多花时间学习，在实际应用中思考如何更好的将其运用，并且借助浏览器的开发者工具不断地调试和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f80f4af6b2d6eab303555e