Flexbox 弹性盒子布局是 CSS3 新增的一种布局方式，可以让你更加方便地进行页面布局。在本文中，我们将详细讨论如何使用 Flexbox 实现一个经典的圣杯布局。
什么是圣杯布局？
圣杯布局是一种流行的网页布局方式，于 2006 年由 Mathias Bynens 转载于 A List Apart。它通常用于多列布局，并且有一个主内容区域和两个侧边栏，其中主内容区域位于页面的中心，两个侧边栏位于主内容区域的左右两侧。
实现圣杯布局的传统方法
在 CSS3 出现之前，实现圣杯布局的方法通常是封装多列布局，使用相对定位和负边距来扩展主内容区域，并将侧边栏移动到适当的位置。但这种方法看起来很复杂，而且不太灵活。
以下是使用传统方法实现的圣杯布局代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
---- -
------- --
-------- --
---------- -----
------------ ------
------------ ---------- ------ ------------ ------ -----------
-
----- -
------- - -----
---------- ------
---------- ------
-------- - ----- - ------
-
-------- -
------ -----
------ -----
-
------
------ -
--------- ---------
------ -----
------ ------
------------ ------
----- -------
-
----- -
----------------- -----
-
------ -
----------------- -----
-
---------------- -
------- - ----- - --
-
--------
------- -
----------------- --------
------- ------
------------ ------
----------- -------
-
------- -
------- - - ------
-
------- -
------- ----- - --
-
--------
-------
------
---- -------------
------- ------------------------------
---- ------------------------
---- ----------------
------- ---- ------- ---------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- ------ ------ ------ -- ------ --- -------- -- ------ ------- ---- ---- --------- -------- ---- --- ------- ------ ------------ --------- ------- ------ ---- -------- ------ ------ ---- ----------- --------- ------ ------- -- ------ ---- --------- ---- ----- -------- ------ --- --------- ---------- ---- ---- --------- ----- ----- --------- ------ ----- -- -----------
------
---- ----------------- -------------
---- ------------------- -------------
------
------- ------------------------------
------
-------
-------你会发现这段代码很复杂，而且需要使用大量的 CSS 来实现效果。但是在使用 Flexbox 的情况下，我们可以更容易地实现这个布局，并且代码量更少。
如何使用 Flexbox 实现圣杯布局
Flexbox 的弹性盒子布局提供了一种更简单、更灵活的方式来实现页面布局。以下是使用 Flexbox 实现的圣杯布局代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
---- -
------- --
-------- --
---------- -----
------------ ------
------------ ---------- ------ ------------ ------ -----------
-
----- -
------- - -----
---------- ------
---------- ------
-------- -----
---------- --- -----
-
-------- -
----- --
------ --
------- - ----- - --
-
------
------ -
----- - - ------
-
----- -
------ --
----------------- -----
-
------ -
------ --
----------------- -----
-
--------
------- -
----------------- --------
------- ------
------------ ------
----------- -------
------ -----
-
------- -
------ --
------- - - ------
-
------- -
------ --
------- ----- - --
-
--------
-------
------
---- -------------
------- ------------------------------
---- ------------------------
---- ----------------
------- ---- ------- ---------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- ------ ------ ------ -- ------ --- -------- -- ------ ------- ---- ---- --------- -------- ---- --- ------- ------ ------------ --------- ------- ------ ---- -------- ------ ------ ---- ----------- --------- ------ ------- -- ------ ---- --------- ---- ----- -------- ------ --- --------- ---------- ---- ---- --------- ----- ----- --------- ------ ----- -- -----------
------
---- ----------------- -------------
---- ------------------- -------------
------
------- ------------------------------
------
-------
-------如你所见，使用 Flexbox 实现的圣杯布局的代码非常简洁，而且易于理解和修改。
解释 Flexbox 布局代码
下面我们将逐个解释 Flexbox 实现圣杯布局的代码，以便你更好地了解代码的含义。
容器样式代码
.page {
margin: 0 auto;
max-width: 960px;
min-width: 240px;
display: flex;
flex-flow: row wrap;
}这个容器样式代码片段定义了 .page 这个容器的样式。我们在这里使用 Flexbox 布局，设置了 display: flex。这意味着我们正在使用一个 Flexbox 容器。
flex-flow: row wrap 表示我们将水平布局（row），并在容器的边缘处换行（wrap）。
主要布局代码
-- -------------------- ---- ------- -------- - ----- -- ------ -- ------- - ----- - -- - ------ ------ - ----- - - ------ - ----- - ------ -- ----------------- ----- - ------ - ------ -- ----------------- ----- -
接下来是一个样式片段，定义了 .content、.left 和 .right 这三个元素的样式。
.content 是用来容纳主要内容的，所以我们可以使用 flex: 1 让它占据剩余的空间。order: 2 表示它应该是第二个元素。
.left 和 .right 表示侧边栏，并且应该需要一个固定的宽度，所以我们使用 flex: 0 0 200px 来指定一个固定的宽度。这也意味着它们不会被放大或缩小。
我们在 .left 和 .right 中使用了 order 属性以及不同的背景颜色来标识它们在页面上的位置。
头尾代码
-- -------------------- ---- ------- -------- ------- - ----------------- -------- ------- ------ ------------ ------ ----------- ------- ------ ----- - ------- - ------ -- ------- - - ------ - ------- - ------ -- ------- ----- - -- -
最后，我们需要为页面的头部和底部设置样式。我们在 header 和 footer 中使用了相同的弹性盒子布局，他们的 order 值分别为 0 和 4。
我们设置宽度为 100%，并使用背景颜色、高度、行高等样式参数，使它们在页面中央垂直对齐。在 .header 中，我们还添加了一个下边距，以便让主内容容器腾出一些空间。
结论
如此简单和清晰的代码，是不是让你深受启发？使用 Flexbox 布局，我们可以轻松地实现圣杯布局，并且代码量非常少。
尝试使用 Flexbox 布局解决你的其他页面布局问题吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e6308e9a7045d0d690434