BEM中不能直接用justify-content写在Modifier类上，因为Modifier不改变元素是否为Flex容器，必须先确保父容器声明display: flex，Modifier才生效；且Modifier应专注对齐逻辑，避免混入无关样式。
为什么BEM里不能直接用justify-content写在Modifier类上
因为justify-content是容器级属性，作用对象是Flex容器本身，而BEM的Modifier（如.layout--center）只是附加类名，它不改变元素是否为Flex容器——前提是父元素没设display: flex。常见错误是写了.layout--center却忘了给父容器加display: flex，结果样式完全不生效。
真正起效的前提有三个：
- 父容器必须声明
display: flex（或inline-flex） - Modifier类需绑定在该Flex容器上，而非子元素
- Modifier内部应只设置对齐相关属性，避免混入尺寸、颜色等无关样式
.layout--space-between这类Modifier该怎么写才安全
直接写justify-content: space-between没问题，但要注意兼容性和覆盖逻辑。比如项目里已有全局justify-content: flex-start，那Modifier必须带足够权重才能覆盖；更稳妥的做法是统一在基础类里重置，再由Modifier接管：
.layout {
display: flex;
justify-content: flex-start; /* 默认左对齐 */
align-items: stretch;
}
<p>.layout--center {
justify-content: center;
}</p><p>.layout--space-between {
justify-content: space-between;
}</p><p>.layout--vertical {
flex-direction: column;
justify-content: center; /<em> 此时justify-content管上下 </em>/
align-items: flex-start; /<em> 此时align-items管左右 </em>/
}关键点：
- Modifier不重复声明
display: flex，避免冗余 - 涉及
flex-direction变更的Modifier（如--vertical），必须同步调整justify-content和align-items的语义指向 - 不要用
!important强行覆盖，靠BEM层级和声明顺序控制优先级
多个Modifier叠加时align-items和justify-content会冲突吗
不会自动冲突，但容易人为覆盖错。例如同时加.layout--center和.layout--end，后声明的类会覆盖前者的justify-content值——这其实是CSS层叠机制的正常表现，不是Bug。
实际开发中建议：
- 一个容器最多应用一个对齐类（如只用
--center或--space-around），避免语义混乱 - 如果真需组合（比如垂直居中+水平右对齐），用组合类名：
.layout--center-y-end-x，并在CSS中明确定义其行为 - 避免Modifier之间互相依赖，每个Modifier应是独立可测试的单元
用BEM写Flex对齐时最容易被忽略的细节
最常漏掉的是flex-wrap和align-content的联动。当Modifier用于多行布局（比如卡片网格）时，仅改justify-content没用——align-content才控制多行整体在交叉轴上的位置。
例如：
.grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
<p>.grid--center-lines {
align-content: center; /<em> 多行时让所有行整体垂直居中 </em>/
}这时候如果忘了flex-wrap: wrap，align-content就完全无效；如果用了flex-wrap: nowrap，又强行加align-content，等于写了段死代码。
所以每次写Modifier前，先确认三件事：
- 容器是否需要换行？→ 决定
flex-wrap值 - 是单行还是多行对齐？→ 决定用
align-items还是align-content - 主轴方向是否变化？→ 决定
justify-content和align-items谁管哪个方向
