Flex嵌套需分层管控：外层定方向与结构，内层管对齐与空间分配；避免主轴混乱、滥用flex-direction、深层嵌套选择器、flex-grow/shrink叠加及margin间隙；横向滚动容器须独立封装并禁用弹性伸缩。
Flex 布局嵌套本身没问题，关键在于控制好每一层容器的职责和作用域——外层管方向与结构，内层管对齐与空间分配，避免父子容器属性互相干扰。
明确每层容器的 flex-direction 和换行策略
嵌套时最容易出错的是主轴方向混乱。比如外层是 column（竖向列表），内层商品项又设成 column（导致标题、图片、价格堆叠错乱），就破坏了语义流。
- 外层容器（如商品列表）用 flex-direction: column 管整体模块顺序
- 内层容器（如单个商品卡片）用 flex-direction: row 排图标+文字，或 column 排图文+按钮，但必须有明确目的
- 需要换行的场景（如多列商品网格），在外层用 flex-wrap: wrap，而不是靠内层 flex 项目自己“撑开”
- 避免在子项目上滥用 flex-direction —— 它属于容器属性，写在子元素上无效
用 class 隔离样式作用域，不依赖嵌套选择器
Flex 项目默认只响应其直接父容器的 flex 规则。但若用类似 .list .item .title 这类深层嵌套选择器，一旦结构微调（比如加个 wrapper div），样式就断链。
- 给每层容器定义独立语义化 class，例如：
product-list、product-card、product-info - 所有 flex 相关样式都写在对应 class 上，如
.product-card { display: flex; flex-direction: row; } - 禁用 ID 或多层 class 组合（如
.list > .item > .content），改用 BEM 风格：product-card__content - 不通过父类名控制子元素 flex 行为（如
.list--horizontal .item），而用 modifier 直接修饰容器：product-list--row
慎用 flex-grow / flex-shrink 在嵌套中
这些伸缩属性在嵌套层级里容易叠加放大误差。比如外层 flex: 1 + 内层 flex: 1，可能导致内容被过度压缩或溢出。
- 优先用固定尺寸（
width、flex-basis）或max-width控制基础宽度 - 只在明确需要“填满剩余空间”的单一容器内使用
flex: 1，例如侧边栏里的内容区 - 嵌套中若需等分布局，用
flex: 0 0 calc(50% - 8px)比flex: 1更可控 - 用
gap替代 margin 做间隙，避免 margin 折叠或与 flex 分配冲突
横向滚动容器要单独封装，不混入主布局流
像轮播图、标签栏这类横向滚动模块，常因嵌套进 vertical flex 流而出现高度塌陷或滚动失效。
- 横向滚动容器必须设 white-space: nowrap + overflow-x: auto
- 它的子项统一用 flex: 0 0 auto，禁止参与弹性伸缩
- 不要把它作为 vertical flex 容器的直接子项后还期望它自动撑高；可显式设 min-height 或用 align-items: flex-start 防止 stretch 拉伸
- 滚动容器自身不设
display: flex以外的 flex 属性（如justify-content），除非真需要内部对齐
