什么是响应式布局？
响应式布局是指设计一个能够自适应不同设备屏幕大小的网页布局。随着不同设备的普及，如手机、平板电脑以及桌面电脑等，让网页具有响应式布局使得网页在任何尺寸的屏幕上都可以呈现出适当的布局和内容。
什么是圣杯布局？
圣杯布局是一种基于 CSS 的经典布局，其目的是在具有多个列布局的网页上提供一个固定的中心列。中心列最后定宽，左侧列的宽度会自适应屏幕宽度，右侧列同理。这个布局常常用在博客和内容分页这样的页面中。
如何使用 CSS Flexbox 实现圣杯布局？
CSS Flexbox 是一种强大的布局方法，它解决了众多 CSS 布局方式的问题。要创建一个响应式的圣杯布局，我们可以使用 Flexbox 的许多特性，例如弹性容器、弹性子元素以及主轴和交叉轴等概念。
以下是一份示例代码，演示如何使用 CSS Flexbox 实现圣杯布局。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ---- ----- ------ ---- --- ---------------
-------
---------
-------- -----
---------- -------
---------------- --------------
-
-------- --------
----- --
------ --
------- - -----
-
-------- -------
----- - - ------
------ --
------------- -----
-
-------- ------
----- - - ------
------ --
------------ -----
-
--------
--------
------ -----
------- ------
----------- --------
------ -----
----------- -------
-
---------
------ -----
----------- ------
----------------- -----
-
--------
-------
------
------- ---------------
---------------
---------
---- ----------------
------ -------------
-------- ------------
--------
----- ---------------
---------- ------------
-------- ----- ----- --- ----- ----
-------
------ --------------
--------- ------------
--------
------
---- ----------------
---------- ---------
------
------- ---------------
---------------
---------
-------
-------CSS Flexbox 实现圣杯布局的步骤：
- 首先，我们需要定义一个弹性容器，将其 display 属性设置为 flex。
- 接着，我们需要通过 flex-wrap 属性来控制子元素是否换行。在圣杯布局中，子元素不换行，因此需要设置 flex-wrap 为 nowrap。
- 然后，我们可以通过 justify-content 属性来控制如何排列弹性容器中的子元素。在此处，我们希望子元素之间平均分配空间，因此可以使用 justify-content: space-between。
- 下一步是设置弹性子元素的样式。在本例中，这些元素分别是左侧边栏、中心部分和右侧边栏。我们需要分别为它们设置适当的 flex 属性。例如，中心部分应该设置 flex: 1，而左、右两侧的边栏应该设置固定的宽度，例如 flex: 0 0 200px。
- 最后，我们需要通过 order 属性来设置弹性子元素的显示顺序。在圣杯布局中，左侧边栏应该显示在中心部分的左侧，右侧边栏应该显示在中心部分的右侧。因此，我们需要为左、中、右三个元素分别设置不同的 order 值，例如左侧边栏应该设置为 order: 1。
总结
CSS Flexbox 是一种强大的布局方法，可以用来创建响应式布局，特别是圣杯布局这样的固定宽度中心列布局。通过使用 Flexbox 的许多特性，我们可以轻松创建出这种经典网页布局。掌握 CSS Flexbox 的技能可以帮助前端开发者在网页设计领域中更加自如地实现他们的创意。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2529c48841e9894eaa66f