多display:flex代码最佳实践及避免重复CSS属性的方法（非SASS）

• 优先语义化类名+工具类组合：别用纯样式描述的类名（比如.flex-center）作为唯一类名，而是给元素起基于功能或结构的类名（比如.user-avatar-wrapper），再搭配通用flex工具类。既保证HTML语义清晰，又能复用样式。
• 抽离通用flex工具类：把常用的flex模式（比如居中、横向分布、纵向排列）做成独立工具类，比如.flex（仅设置display:flex）、.flex-center（包含居中三属性）、.flex-between（justify-content: space-between），需要时直接在HTML上组合这些类，避免重复写属性。
• 合理使用flex缩写：用flex: 1代替flex-grow: 1; flex-shrink: 1; flex-basis: 0%精简代码，但要记住缩写默认值——比如flex: auto等价于flex-grow:1; flex-shrink:1; flex-basis:auto，避免因混淆导致布局异常。
• 减少嵌套层级：不要在多层嵌套的选择器里重复声明display:flex，尽量把flex样式绑定到最直接的父元素选择器上，降低样式优先级冲突概率，也方便后续修改。
• 响应式逻辑单独拆分：不同屏幕尺寸下的flex布局变化（比如从flex-direction: row改成column），单独写在媒体查询里，不要和基础flex样式混在一起，保持代码逻辑清晰。

当然可以，不用预处理器也能轻松实现DRY，推荐这几种实用方案：

• 通用工具类（最稳妥）：直接定义一个包含目标属性的类，需要时在HTML元素上添加即可：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

示例用法：<div class="profile-card flex-center"></div>，这是兼容性最好、成本最低的复用方式。

• CSS变量+工具类（兼顾灵活性）：如果需要偶尔微调对齐方式，可以用CSS变量配合工具类：

:root {
  --flex-justify: center;
  --flex-align: center;
}
.flex-center {
  display: flex;
  justify-content: var(--flex-justify);
  align-items: var(--flex-align);
}

需要调整时，直接在元素上覆写变量：<div class="flex-center" style="--flex-justify: flex-start"></div>，不用修改基础样式。

• @apply规则（注意兼容性）：CSS的@apply可以批量引用预定义的属性集，但目前浏览器支持有限（Chrome原生支持，Firefox需开启实验特性），写法如下：

:root {
  --flex-center-set: {
    display: flex;
    justify-content: center;
    align-items: center;
  };
}
.profile-card {
  @apply --flex-center-set;
  /* 这里可以加其他专属样式 */
}

如果项目不需要兼容旧浏览器，这个方案能让CSS代码更整洁，但工具类方案依然是通用首选。

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