能否基于flex-direction实现条件CSS？Flexbox对齐类需求

当然可以让.center-x根据元素的flex-direction表现出不同行为！这种需求在Flex布局里非常常见，下面给你几种实用的解决方案，从兼容性好的传统方法到现代CSS特性都有覆盖：

方法1：类组合 + 基础选择器（兼容性最佳） #

这是最稳妥的方案，所有支持Flex布局的浏览器都能兼容。核心思路是给不同方向的Flex容器添加专属类，再结合.center-x类编写针对性样式：

/* 默认：Flex方向为row时，水平居中 */
.center-x {
  display: flex;
  justify-content: center;
}

/* 当容器显式设置为column方向时，改为垂直居中 */
.flex-column.center-x {
  justify-content: initial; /* 重置默认的justify-content */
  align-items: center;
}

/* 可选：统一设置Flex方向的基础类 */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

使用的时候只要给容器同时加方向类和对齐类就行：

<!-- 水平居中的row容器 -->
<div class="flex-row center-x">...</div>

<!-- 垂直居中的column容器 -->
<div class="flex-column center-x">...</div>

方法2：CSS自定义属性（变量）（灵活易维护） #

用CSS变量来动态切换要修改的对齐属性，这种方法更灵活，后续扩展其他对齐方式也很方便：

/* 定义默认的对齐属性变量 */
.flex-row {
  flex-direction: row;
  --align-x-property: justify-content;
}

.flex-column {
  flex-direction: column;
  --align-x-property: align-items;
}

/* 通用的.center-x类 */
.center-x {
  display: flex;
  var(--align-x-property): center;
}

这个方案的好处是，你只需要在方向类里维护变量值，.center-x类的逻辑完全通用，不用重复写重置样式。

方法3：属性选择器（适合内联样式场景） #

如果你的Flex方向是通过内联style属性设置的，可以直接用属性选择器匹配：

.center-x {
  display: flex;
  justify-content: center;
}

/* 匹配内联设置了flex-direction: column的元素 */
.center-x[style*="flex-direction: column"] {
  justify-content: initial;
  align-items: center;
}

注意：这种方法只对内联style属性生效，如果是通过外部/内部样式表的类设置方向，还是得用前两种方法。

方法4：预处理器混合宏（适合用Sass/LESS的项目） #

如果你的项目用了CSS预处理器，可以写一个混合宏来简化代码：

@mixin center-x($direction: row) {
  display: flex;
  @if $direction == row {
    justify-content: center;
  } @else if $direction == column {
    align-items: center;
  }
}

// 生成基础的.center-x类
.center-x {
  @include center-x(row);
}

// 生成column方向的.center-x样式
.flex-column.center-x {
  @include center-x(column);
}

编译后会生成和方法1类似的CSS，但写起来更简洁，适合大型项目维护。

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