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>.header {
display: flex;
flex-direction: row;
height: 100px;
justify-content: space-between;
align-items: center;
}
.header > div:first-child {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
align-items: center;
}
.header > div:first-child > span {
flex-grow: 1;
text-align: center;
}页眉部分第二行，是一个完整的一行，占据页面的全部宽度。直接设置 flex: 1，即可使其占据全部宽度，同时也能让在下一个 Flexbox 布局中的元素完整显示。
.header > div:last-child {
flex: 1;
text-align: center;
}- 左侧和右侧布局（嵌套 1 个 Flexbox 容器）
左侧上下两栏和右侧上下两栏，可以分别使用两个 Flexbox 容器。这里，左侧和右侧都使用了相同的 CSS 布局。
左右两边使用相同的 flex-grow: 1，就能够实现各自分配相等的空间。然后，在两栏间设置 gap（实际上相当于 margin-top），以实现元素单独设置间隔的效果。
<div class="left-container">
<div class="card-container">
左侧上部分
</div>
<div class="card-container">
左侧下部分
</div>
</div>
<div class="right-container">
<div class="card-container">
右侧上部分
</div>
<div class="card-container">
右侧下部分
</div>
</div>.left-container,
.right-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.moblem-homecard-container {
margin-top: 20px;
}右侧下栏与左右两边联通，宽度可以自适应，直接设置 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>.body-container {
display: flex;
justify-content: center;
}
.container {
max-width: 1200px;
position: relative;
margin: auto;
}最后，在 container 中，要求主体部分和按钮独立占据均分宽度的空间，并保留元素间距。此时，可以使用 Flexbox 布局，在 container 中嵌套两个均分空间的 div，其中左侧 div 中包含主体部分内容。
<div class="inner-container">
<div class="main-left">
主体部分
</div>
<div class="main-right">
<div class="status-info">
状态栏信息
</div>
<div class="action-buttons">
右下角的按钮
</div>
</div>
</div>.inner-container {
display: flex;
flex-direction: row;
}
.inner-container > div {
flex: 1;
}
.main-left {
margin-right: 20px;
}
.status-info {
margin-bottom: 20px;
}
.action-buttons {
position: absolute;
bottom: 0;
right: 0;
}总结
使用嵌套 Flexbox 布局可以为我们的页面带来更多的灵活性和自由度，相比其他布局方式，Flexbox 的特性：基于容器而不是基于图形对象来布局，能够更好地适配不同类型的设备及页面宽度变化需求，也更加方便功能的可扩展及维护。
本文对如何使用嵌套 Flexbox 进行布局做了详细介绍，希望对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65912401eb4cecbf2d65e596