Flexbox 是一种非常流行的 CSS 布局技术，可以使得我们的页面设计更加简便和精湛，尤其是在移动端开发中，更能够体现其优越性。虽然单独使用 Flexbox 可以构建出各种简单和复杂的布局，但嵌套 Flexbox 可以进一步扩展其能力和应用，用来构建更复杂的布局。
本文将会介绍如何使用嵌套 Flexbox 构建更复杂的布局，内容详细且有深度和学习以及指导意义，并包含示例代码。
嵌套 Flexbox 的概念
通俗地讲，嵌套 Flexbox 指的是在一个 Flexbox 容器中再嵌套另一个或多个 Flexbox 容器。这种方式可以实现更加复杂的页面布局，特别是在移动端设备中，更容易灵活适配。
嵌套 Flexbox 的关键在于如何管理嵌套层次的子元素的对齐方式、空间分配以及流动方向。这需要根据实际需求进行设计，同时需要注意多层嵌套可能会产生性能问题，所以需要根据需求避免不必要的层次嵌套。
嵌套和外部 Flexbox 容器
在实现嵌套 Flexbox 布局时，我们需要注意到嵌套容器的布局是相对于外部容器的空间定义的，也即外部容器限制了嵌套容器的大小和位置。如果嵌套容器自身的尺寸定义了它自己所占用的空间，那么外部容器布局的方式就会失效。
这种情况常常出现在「内容可以自动拉伸以填满可用空间的比例布局」中（即 flex-grow），可以借助外部的 Flexbox 容器来实现。
Flexbox 布局的基础
在进一步研究嵌套 Flexbox 布局之前，我们需要先掌握 Flexbox 布局的基础知识。
Flexbox 的布局方式会将空间划分为「主轴」和「交叉轴」两个方向，通过设置 flex-container 容器的 display: flex 来启用 Flexbox，然后在其上设置一些属性来控制孩子元素的排列方式。
以下是一些主要的 Flexbox 性质：
容器属性
display: flex：将容器声明为 Flexbox 容器。flex-direction：设置主轴的流动方式。justify-content：设置主轴上子元素相对容器的对齐方式。align-items：设置交叉轴方向上的对齐方式。align-content：设置多行子元素在交叉轴方向上的分配。
子元素属性
flex：设置子元素的分配比例，可以控制元素的伸缩。flex-basis：用来设置子元素的尺寸，即当子元素没有分配应缩小或者放大的空间时，如何设置尺寸，通常仅在和flex-grow / flex-shrink属性搭配使用。flex-grow：在子元素之间，按比例分配多出来的空间。flex-shrink：在空间不足时，按比例收缩子元素。
嵌套 Flexbox 布局的实现
下面将以某个复杂网站为例，具体介绍如何使用嵌套 Flexbox 来构建布局。
嵌套 Flexbox 布局示例
布局分析
根据上述需求，我们将页面分为了四个主要的部分：
- 页眉分为两行，上面是左右两部分均分，下面是一整行。
- 左侧分为两栏，左上和左下。
- 右侧分为两栏，上面栏宽度固定且右对齐，下面栏宽度填满余下空间。
- 主体部分根据页面宽度自适应，并在窗口宽度过小时卡在页眉和页脚的中间。
每个部分都可以使用一个 Flexbox 容器来实现。具体做法如下：
- 页眉部分布局（嵌套 2 个 Flexbox 容器）
页眉部分第一行，左侧和右侧可以平分宽度，使用一个 Flexbox 容器来实现。方案如下：父元素使用 Flexbox 布局，子元素平均放置，左右两个元素设置相同的 flex-grow: 1，以实现相同宽度分配。
<header class="header">
<div>
<span>左侧内容</span>
<span>右侧内容</span>
</div>
<div>下面的一整行内容</div>
</header>-- -------------------- ---- ------- ------- - -------- ----- --------------- ---- ------- ------ ---------------- -------------- ------------ ------- - ------- - --------------- - -------- ----- --------------- ---- ---------- -- ---------------- -------------- ------------ ------- - ------- - --------------- - ---- - ---------- -- ----------- ------- -
页眉部分第二行，是一个完整的一行，占据页面的全部宽度。直接设置 flex: 1，即可使其占据全部宽度，同时也能让在下一个 Flexbox 布局中的元素完整显示。
.header > div:last-child {
flex: 1;
text-align: center;
}- 左侧和右侧布局（嵌套 1 个 Flexbox 容器）
左侧上下两栏和右侧上下两栏，可以分别使用两个 Flexbox 容器。这里，左侧和右侧都使用了相同的 CSS 布局。
左右两边使用相同的 flex-grow: 1，就能够实现各自分配相等的空间。然后，在两栏间设置 gap（实际上相当于 margin-top），以实现元素单独设置间隔的效果。
-- -------------------- ---- -------
---- -----------------------
---- -----------------------
-----
------
---- -----------------------
-----
------
------
---- ------------------------
---- -----------------------
-----
------
---- -----------------------
-----
------
-------- -------------------- ---- ------- ---------------- ---------------- - -------- ----- --------------- ------- ---------- -- - -------------------------- - ----------- ----- -
右侧下栏与左右两边联通，宽度可以自适应，直接设置 flex: 1 占据可用空间即可。
.right-container > div:last-child {
flex: 1;
background-color: #e1e1e1;
border-radius: 5px;
padding: 20px;
}- 主体部分布局（嵌套 1 个 Flexbox 容器）
页面主体部分要求可以自适应宽度，但当宽度比较小时，需要卡在页眉和页脚之间。这里可以使用一个 Flexbox 容器嵌套一个 container，其中 container 用来包含主体部分，在主体部分的右下角固定了一个按钮。Flexbox 容器用来限制 container 的最大宽度，并设置居中对齐。
<div class="body-container">
<div class="container">
这里是主体部分内容和按钮
</div>
</div>-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- - ---------- - ---------- ------- --------- --------- ------- ----- -
最后，在 container 中，要求主体部分和按钮独立占据均分宽度的空间，并保留元素间距。此时，可以使用 Flexbox 布局，在 container 中嵌套两个均分空间的 div，其中左侧 div 中包含主体部分内容。
-- -------------------- ---- -------
---- ------------------------
---- ------------------
----
------
---- -------------------
---- --------------------
-----
------
---- -----------------------
------
------
------
-------- -------------------- ---- ------- ---------------- - -------- ----- --------------- ---- - ---------------- - --- - ----- -- - ---------- - ------------- ----- - ------------ - -------------- ----- - --------------- - --------- --------- ------- -- ------ -- -
总结
使用嵌套 Flexbox 布局可以为我们的页面带来更多的灵活性和自由度，相比其他布局方式，Flexbox 的特性：基于容器而不是基于图形对象来布局，能够更好地适配不同类型的设备及页面宽度变化需求，也更加方便功能的可扩展及维护。
本文对如何使用嵌套 Flexbox 进行布局做了详细介绍，希望对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65912401eb4cecbf2d65e596