嵌套Flexbox布局需每层容器显式设置display: flex，外层控制主轴方向与对齐，内层可独立定义flex-direction实现多级响应式结构，如三栏布局中侧边栏垂直排列菜单项。
在使用 Flexbox 布局时，嵌套布局是常见的需求。通过合理设置父容器和子元素的 flex 属性，可以实现灵活、响应式的界面结构。关键在于理解每个层级的 flex 容器 和 flex 项目 如何相互作用。
父容器设置为 flex 布局
要实现嵌套排列，首先让外层容器成为 flex 容器：
display: flex; 是核心属性，它让直接子元素变成 flex 项目，并允许它们沿主轴排列。常见设置包括：
- flex-direction：控制子项排列方向（row、column 等）
- justify-content：定义主轴对齐方式
- align-items：定义交叉轴对齐方式
- flex-wrap：是否换行
子元素也可作为 flex 容器
一个 flex 项目（child）同样可以设置 display: flex，从而成为新的 flex 容器，实现嵌套布局。
例如：页面整体横向排布几个区域，其中一个区域内部需要纵向排列内容。
示例代码：
.parent {
display: flex;
flex-direction: row;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
}
.child-item {
flex: 1;
}
这样，.parent 横向排列多个 .child，而每个 .child 内部的子元素则纵向堆叠。
控制嵌套层级的伸缩行为
使用 flex 缩写属性（如 flex: 1）可以让某些区域自适应填充剩余空间。
注意点：
- 嵌套层级中每一层都需要独立设置 display: flex 或 display: inline-flex
- 内层 flex 项目的尺寸受外层项目尺寸影响
- 避免过度嵌套，保持结构清晰
如果某个 child 设定了固定宽度或使用 flex: none，则不会拉伸，有助于控制布局比例。
实际应用场景举例
常见于三栏布局 + 侧边栏内部垂直导航：
- 外层 flex 实现左侧导航、中间内容、右侧边栏横向分布
- 左侧导航内部使用 flex-column 排列菜单项
- 内容区可能再次嵌套 flex 实现卡片流或头部/主体/底部结构
这种结构清晰且易于响应式调整，比如在小屏下将外层改为 column 方向堆叠。
基本上就这些。只要记住：每个想用 flex 排列的容器都必须显式声明 display: flex，不管它是不是另一个 flex 容器的子元素。嵌套没有限制，但逻辑要清楚。
