如何将@angular/flex-layout代码替换为CSS Flexbox？全局类方案探讨

1. 等价的CSS Flexbox转换代码 #

先修改模板，移除所有fx-*指令，改用自定义类名：

<div class="product-container">
  <div *ngFor="let product of products" class="product-item">
    <app-product-list-card [product]="product"></app-product-list-card>
  </div>
</div>

然后在组件样式文件或全局styles.scss中添加对应CSS：

/* 父容器样式，对应原fxLayout、fxLayoutGap、fxLayoutAlign */
.product-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch; /* 对应原fxLayoutAlign的第二个值none，保持默认拉伸行为 */
  gap: 16px; /* 等价于fxLayoutGap="16px grid"，现代浏览器flex布局已支持gap属性 */
}

/* 子项基础样式，对应原默认fxFlex */
.product-item {
  flex: 0 0 calc(33% - 16px); /* 对应fxFlex的flex-grow/flex-shrink/flex-basis规则 */
}

/* 响应式断点：对应原fxFlex.sm（Angular flex-layout默认sm断点为≥600px） */
@media (min-width: 600px) and (max-width: 959px) {
  .product-item {
    flex: 0 0 calc(50% - 16px);
  }
}

/* 响应式断点：对应原fxFlex.xs（Angular flex-layout默认xs断点为<600px） */
@media (max-width: 599px) {
  .product-item {
    flex: 0 0 calc(90% - 16px);
  }
}

说明：

• gap:16px直接替代fxLayoutGap，无需额外处理间距兼容（现代主流浏览器均支持flex布局使用gap）
• 断点值沿用Angular flex-layout的默认规则，若你的项目自定义了断点，对应调整媒体查询即可

2. 全局styles.scss编写通用类的可行性 #

完全可以在全局styles.scss中编写通用flex布局类，在项目任意组件的模板中直接复用。

示例通用类写法：

/* 全局通用flex布局类 */
.flex-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-justify-space-evenly {
  justify-content: space-evenly;
}

.gap-16 {
  gap: 16px;
}

/* 响应式通用类 */
@media (max-width: 599px) {
  .flex-basis-xs-90 {
    flex: 0 0 calc(90% - 16px);
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .flex-basis-sm-50 {
    flex: 0 0 calc(50% - 16px);
  }
}

.flex-basis-33 {
  flex: 0 0 calc(33% - 16px);
}

使用时模板可简化为：

<div class="flex-row-wrap flex-justify-space-evenly gap-16">
  <div *ngFor="let product of products" class="flex-basis-33 flex-basis-sm-50 flex-basis-xs-90">
    <app-product-list-card [product]="product"></app-product-list-card>
  </div>
</div>

注意事项：

• 全局样式作用于整个应用，命名建议加前缀避免冲突
• 若组件内样式使用了更具体的选择器（比如带组件宿主类的选择器），会覆盖全局类样式，可通过调整选择器优先级解决（不推荐滥用!important）

内容的提问来源于stack exchange，提问作者Chaitanya Karmarkar