什么是 Flex 布局？
Flex 布局是一种响应式设计的 CSS 布局方式，它可以让你轻松地实现弹性盒子布局。
使用 Flex 布局可以让你的页面更加灵活和易于维护，同时还可以让你实现一些复杂的布局需求。
本文主要介绍 Flex 布局中的两种高级布局方式：圣杯布局和双飞翼布局。
圣杯布局
圣杯布局是一种经典的三栏布局方式，其中主内容栏在 HTML 代码中排在前面，而两侧的侧边栏在 HTML 代码中排在后面。
圣杯布局的优点在于可以让主内容栏先加载，这样可以提高首屏加载速度。
下面是圣杯布局的示意图：
-- -------------------- ---- ------- ---------------------------------------------------- - - - - - - - ---- - - - - - - - ---------------------------------------------------- ------- ------- ----------------------------------------------------
接下来就让我们来看看如何使用 Flex 布局实现圣杯布局。
HTML 代码
首先，我们需要给我们的 HTML 文件添加一些必要的内容。
<div class="container">
<div class="main">Main</div>
<div class="left">Left Sidebar</div>
<div class="right">Right Sidebar</div>
</div>CSS 代码
接下来，我们需要添加一些必要的 CSS 代码。
-- -------------------- ---- -------
---------- -
-------- -----
---------------- --------------
------------ --------
-
----- -
----- --
-
------
------ -
----------- ------
-这些 CSS 代码使用了 Flex 布局中的一些常用属性：
display: flex;表示我们要使用 Flex 布局。justify-content: space-between;表示我们要使用空余空间平均分布在两个侧边栏之间。align-items: stretch;表示我们要让侧边栏的高度跟主内容栏的高度一致。flex: 1;表示我们要让主内容栏占满所有的可用空间。flex-basis: 200px;表示我们要给侧边栏一个固定宽度。
示例代码
下面是完整的圣杯布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
---------- -
-------- -----
---------------- --------------
------------ --------
-
----- -
----- --
-
------
------ -
----------- ------
-
--------
-------
------
---- ------------------
---- -----------------------
---- ----------------- -------------
---- ------------------- -------------
------
-------
-------双飞翼布局
双飞翼布局是另一种类似于圣杯布局的三栏布局方式。
双飞翼布局的优点在于主内容栏被优先加载，在较旧浏览器上也能很好地工作。
下面是双飞翼布局的示意图：
+----------------------------+ | | | 主内容栏 | | | +----------------------------+ | 左侧边栏 | 右侧边栏 | +----------------------------+
接下来就让我们来看看如何使用 Flex 布局实现双飞翼布局。
HTML 代码
首先，我们需要给我们的 HTML 文件添加一些必要的内容。
<div class="main-wrapper">
<div class="main">Main</div>
</div>
<div class="left">Left Sidebar</div>
<div class="right">Right Sidebar</div>CSS 代码
接下来，我们需要添加一些必要的 CSS 代码。
-- -------------------- ---- -------
------------- -
-------- -----
---------------- -------
-
----- -
----- --
-
------
------ -
----------- ------
----------- --------
------------ -------
-
----- -
------ ---
-
------ -
------ --
-
---------------- -
-------- ------
-------- ---
------ -----
-这些 CSS 代码使用了 Flex 布局中的一些常用属性以及一些其他的技巧：
display: flex;表示我们要使用 Flex 布局。justify-content: center;表示我们要让主内容栏水平居中。flex: 1;表示我们要让主内容栏占满所有的可用空间。flex-basis: 200px;表示我们要给侧边栏一个固定宽度。margin-top: -9999px;和padding-top: 9999px;可以让侧边栏超出主内容栏，使其看起来像两个独立的列。order属性可以控制元素的顺序，这里我们使用order: -1;和order: 1;分别让左侧边栏和右侧边栏在主内容栏之前和之后。:after伪类可以添加一个空白的元素，这里我们使用它来清除浮动。
示例代码
下面是完整的双飞翼布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------------- -
-------- -----
---------------- -------
-
----- -
----- --
-
------
------ -
----------- ------
----------- --------
------------ -------
-
----- -
------ ---
-
------ -
------ --
-
---------------- -
-------- ------
-------- ---
------ -----
-
--------
-------
------
---- ---------------------
---- -----------------------
------
---- ----------------- -------------
---- ------------------- -------------
-------
-------总结
本文介绍了 Flex 布局中的两种高级布局方式：圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局都是非常实用和常用的布局方式，熟练掌握它们可以让你更加轻松地实现各种页面布局需求。
同时，Flex 布局在前端开发中也是一个非常实用的工具，它可以让你更加灵活地控制页面的布局和排版。
我们希望通过本文的介绍，能够帮助你更好地理解 Flex 布局的使用方法以及圣杯布局和双飞翼布局的具体实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b9217968c7c53b0ddffd8