Flex容器的排列方向必须由Modifier显式控制且作用于已声明display:flex的容器本身，否则无效；Modifier需成对调整flex-direction与justify-content/align-items，并用业务语义命名，确保可开关与合理回退。

Flex容器的排列方向（flex-direction）必须由 Modifier 显式控制，且 Modifier 必须绑定在已声明 display: flex 的 Block 上——否则样式不生效。别指望靠类名自动“变成”Flex容器。

Modifier 必须作用于已启用 Flex 的容器本身

常见错误是给子元素加 .layout--vertical，但父容器没写 display: flex，结果 flex-direction: column 完全无效。BEM 的 Modifier 不改变元素类型，只开关已有布局行为。

• ✅ 正确：容器本身带 Block 类（如 nav-menu），CSS 中先定义 .nav-menu { display: flex; }，再用 .nav-menu--stacked 控制方向
• ❌ 错误：<div class="nav-menu__item layout--vertical"> —— 子元素加 Modifier 对 flex-direction 无意义
• ⚠️ 注意：若使用 CSS Modules 或 scoped 样式，仍需确保 display: flex 在该作用域内声明，不能依赖全局样式“透传”

方向 Modifier 要同步重置对齐语义

flex-direction 一变，justify-content 和 align-items 的作用轴就翻转了。比如 justify-content: center 在 row 下是水平居中，在 column 下就变成垂直居中——但业务意图可能仍是“内容居中”，所以 Modifier 必须成对调整。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• ✅ 推荐写法：.nav-menu--stacked { flex-direction: column; justify-content: center; align-items: flex-start; }
• ❌ 危险写法：.nav-menu--stacked { flex-direction: column; } —— 留下 justify-content: space-between 默认值，小屏下菜单项可能被拉到顶部和底部，中间空一大片
• ? 小技巧：基础 Block 规则里统一设默认对齐，如 .nav-menu { justify-content: flex-start; align-items: center; }，Modifier 只覆盖必要部分

避免用纯 CSS 属性映射的 Modifier 名

像 --flex-col 或 --dir-column 这类名字，等于把实现细节塞进 HTML，后续换成 Grid 或改用 flex-wrap 时，类名就失去业务意义。

立即学习“前端免费学习笔记（深入）”；

• ✅ 用业务语义命名：nav-menu--compact（表示紧凑堆叠）、nav-menu--full-height（表示纵向占满）、editor-toolbar--vertical（工具栏竖排）
• ❌ 禁止：nav-menu--flex-col、layout--justify-center —— 这些是 CSS 属性快照，不是组件状态
• ? 关键判断：删掉这个 Modifier，布局是否能自然回退到合理默认值？如果必须靠 cascade fallback 才不崩，说明它没做到“可开关”

最易忽略的一点：方向切换常伴随子项尺寸策略变化——比如 column 下通常要禁用 flex-shrink 防止内容被压缩，而 row 下可能依赖它做弹性收缩。Modifier 不只是换一个属性，它是一组协同行为的开关。