Flex容器应命名为体现业务职责的block名（如product-grid），而非暴露技术实现的flex-container；项目必须是直接子元素并带完整BEM路径，对齐等布局逻辑直接写在block规则中。
Flex容器本身就是一个独立的 block，不需要为“弹性行为”额外加修饰符；项目（item）必须是容器的直接子元素，且每个项目都应有完整 BEM 路径，不能靠嵌套选择器推导关系。
Flex 容器该不该叫 flex-container？
不该。这种命名暴露实现细节，且语义丢失——flex-container 无法说明它承载的是什么业务模块。BEM 要求 block 名体现职责，不是技术手段。
- ✅ 正确：用
product-grid（商品列表网格）、nav-menu（导航菜单）、editor-toolbar（编辑器工具栏）作为 block 名 - ❌ 错误：用
flex-row、flex-container--centered，这类名字在换用 Grid 后就失效，也掩盖了真实业务上下文 - ⚠️ 注意：
display: flex是实现方式，写在 CSS 里即可；HTML 中只保留语义化 block 类名，比如<div class="product-grid">
Flex 项目（item）怎么写 BEM 类名才不越界？
项目必须是 Flex 容器的直接子元素，且每个项目都要带完整 block 前缀。BEM 不允许靠 DOM 层级“猜”归属，也不允许跨 block 复用 element 名。
- ✅ 正确：
<div class="product-grid"><div class="product-grid__item">...</div></div>，CSS 写.product-grid__item，不依赖父容器类名 - ❌ 错误：
<div class="product-grid"><div class="item">...</div></div>——item全局污染，后续cart-item或nav-item都可能被覆盖 - ⚠️ 注意：如果某 item 内部还要拆更细结构（比如
product-grid__item里有标题、图片、价格），应优先判断是否需独立成块；若它只在 grid 里出现且无复用场景，可用product-grid__item-title；但若标题样式要复用于详情页，则应拆为product-title独立 block
Flex 的 align-items 和 justify-content 怎么和 BEM 配合？
这些对齐控制属于容器级布局逻辑，应直接写在 block 规则里，而不是靠修饰符或后代选择器模拟。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：在
.nav-menu { display: flex; justify-content: space-between; align-items: center; }中统一控制，所有nav-menu__item自然受益 - ❌ 错误：给每个
nav-menu__item加margin-left: auto模拟两端对齐，既难维护又破坏 Flex 本意 - ⚠️ 注意：单个项目需要特殊对齐（如某个
nav-menu__item垂直居底），用align-self+ 修饰符：nav-menu__item--align-bottom { align-self: flex-end; }，而非写.nav-menu .nav-menu__item:last-child
Flex 换行（flex-wrap）时，BEM 如何避免样式断裂？
换行不改变 BEM 结构，但容易让人误以为要加新 block 或改 class。关键点是：wrap 只影响排列，不改变语义归属。
- ✅ 正确：保持
product-grid__item不变，CSS 中用.product-grid { flex-wrap: wrap; }+.product-grid__item { flex: 1 1 240px; }控制响应式断行 - ❌ 错误：为换行后多出的“行”单独定义
product-grid__row，这违背了 Flex 项目扁平化原则，也增加不必要的 DOM 节点 - ⚠️ 注意：如果真需要语义化“行”（例如仪表盘中某几项必须同组渲染），那说明它已超出纯布局范畴，应拆为
dashboard-section这类新 block，而不是强行塞进 Flex 容器的视觉分组里
BEM 和 Flex 的交集其实很窄：Flex 管排列，BEM 管归属。最容易翻车的地方，是把 Flex 的“视觉分组”当成了“语义分组”，然后硬加一层 class 或修饰符——结果既没提升可维护性，又让 HTML 和 CSS 都变得更重。真正干净的做法，是让每个 block 自洽，让每个 __item 只回答“它属于谁”，而不是“它现在排在哪”。
