前言
随着网站功能的复杂化以及设备屏幕大小的多样化，如何高效、灵活地布局网站成为了前端开发中的重要课题。在过去的布局方式中，我们需要通过多种方式进行嵌套和样式的修改，而随着 CSS Grid 和 Flexbox 的出现，我们可以更加高效地进行网站布局。本文将详细介绍如何结合 CSS Grid 和 Flexbox，构建高效的布局模式。
为什么要使用 CSS Grid 和 Flexbox？
CSS Grid 和 Flexbox 是现代网站布局中使用最广泛的两种方式，相比之前的布局方式，它们具有以下优点：
- 代码简洁：CSS Grid 和 Flexbox 可以通过少量的代码进行复杂的布局操作，相比之前的代码可以减少 50% 以上。
- 灵活性强：CSS Grid 和 Flexbox 可以进行非常灵活的布局操作，支持多种排版方式。
- 相互完美结合：CSS Grid 和 Flexbox 可以非常完美地结合使用，各自发挥优势。
不同方式的网站布局
在介绍如何使用 CSS Grid 和 Flexbox 进行布局之前，我们先了解一下以前和现在常用的网站布局方式。
Float 布局
Float 布局是以前常用的布局方式之一，通过设置浮动元素向左或向右进行排版。虽然使用简单，但是 Float 布局也存在以下缺点：
- 布局结构复杂：Float 布局需要通过多个 div 元素进行嵌套才能实现较复杂的布局，代码较为复杂。
- 无法自适应：使用 Float 布局需要为每个元素设置宽度，无法根据窗口大小进行自适应布局。
Position 布局
Position 布局是一种更为灵活的布局方式，通过设置元素的绝对定位实现排版。虽然可以实现复杂的布局，但是也存在以下缺点：
- 代码复杂：需要通过设置绝对位置实现排版，会产生大量的代码。
- 存在堆积问题：当元素过多时，容易产生重叠和堆积的问题。
Table 布局
Table 布局是一种比较被忽视却很实用的布局方式，与传统的表格布局不同，我们可以通过设置 display: table、display: table-row 和 display: table-cell 等属性来模拟表格布局。Table 布局虽然使用简单，但是也存在以下缺点：
- 不够灵活：Table 布局是传统的HTML表格，不能灵活地进行各种排版方式。
- 嵌套繁琐：为了完成复杂的布局样式，需要嵌套多层元素实现，对页面的复杂度产生影响。
CSS Grid 布局
CSS Grid 布局是一种全新的布局方式，是父容器和子容器之间进行网格划分，从而实现各种布局效果。CSS Grid 布局具有以下优点：
- 灵活性强：CSS Grid 布局可以实现多种不同的布局方式，分为垂直方向和水平方向。
- 布局简单：CSS Grid 布局可以通过少量的代码实现复杂的布局方式，代码简洁。
- 自适应性强：CSS Grid 布局可以根据窗口的大小进行自适应布局。
Flexbox 布局
Flexbox布局是一种通过设置容器和元素之间的弹性相应的方式来实现各种布局的方法。与其他布局方式不同，Flexbox布局更加注重对容器内部元素的排版方式进行控制。Flexbox 布局具有以下优点：
- 灵活性强：Flexbox 布局可以在一个方向上对元素进行布局。
- 可读性高：通过设定容器的各个参数来统一设置内部元素的排版方式，便于代码阅读和修改。
- 支持多种排版方式：在 Flexbox 布局中，可以使用 flex-direction 属性来控制排版方式，例如水平方向和垂直方向。
如何结合使用 CSS Grid 和 Flexbox？
CSS Grid 和 Flexbox 作为两种不同的布局方式，各自都有明显的优点，但是它们结合起来可以更加灵活地进行网站布局。
网站导航栏布局
如图，我们需要在 Header 中实现一个简单的导航栏布局，其中包括 Logo 和多个菜单选项。
我们可以通过以下代码进行布局：
-- -------------------- ---- -------
--------
---- -------------
----
------
-----
--- -----------------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-----
------
---------
-- -------------------- ---- ------- ------ - -------- ----- ---------------- -------------- ------------ ------- - ----- - ---------- ----- ------------ ----- - --------- - -------- ----- ---- ----- - --------- - -- - ----------- ----- ---------- ----- ------------ ----- ------ ----- -
我们可以通过将 Header 设置为 flex 布局，然后通过 justify-content: space-between 实现 Logo 和导航菜单之间水平方向的距离。同时，我们还可以通过 gap 属性实现菜单项的水平方向之间的距离。
响应式布局
在移动设备上，由于屏幕大小比较小，常常需要进行响应式布局。我们可以通过 CSS Grid 和 Flexbox 一起进行响应式布局。
如图，我们需要在移动设备上实现一个简单的列表布局，其中每一项的高度和宽度等分，且每个 item 中存在一张图片和一行文字。
我们可以通过以下代码进行布局：
-- -------------------- ---- -------
-------- ----------------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
-------- -------------
---- ----------------------------------- --------- -----
------ ------
----------
------------ -------------------- ---- -------
-------- -
-------- -----
---------------------- ----------------- ------------- ------
---- -----
------- - -----
---------- -------
-
----- -
-------- -----
--------------- -------
-
----- --- -
------ -----
------- -----
-
----- -- -
----------- -----
---------- -----
------------ -----
------ -----
-
------ ----------- ------ -
-------- -
---------------------- ----------------- ------------- ------
-
----- -
-------- -----
-
----- -- -
---------- -----
----------- -----
-
-
我们可以通过 CSS Grid 的 repeat(auto-fill, minmax(300px, 1fr)) 实现每个 item 的宽度等分，并通过 gap 属性实现 item 之间的距离。同时，我们还通过 Flexbox 实现 item 中图片和文字的垂直对齐，并通过媒体查询实现在小屏幕下的响应式布局，让每个 item 的宽度为屏幕等分，并修改 item 中图片和文字的字体大小。
总结
CSS Grid 和 Flexbox 是现代网站布局中使用最广泛的两种方式，它们结合起来可以更加灵活地进行网站布局和响应式布局。CSS Grid 和 Flexbox 在网站布局中可以大幅度地减少代码量和提高开发效率，同时也可以提高网站的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c75c648841e9894acfbca