Css flexbox条件对齐/对齐

是否可以基于另一个属性使用条件css

我想为flexbox对齐编写一些帮助：

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

.center-x {
    ...
}

中心x的内容取决于元素是否具有

弹性方向：列

---

我是否可以让center-x根据元素的灵活方向做出不同的行为？

如OP的评论中所述，

flex direction:column

属性将使用

flex column

类添加到HTML元素中

在这种情况下，我希望下面的例子会有所帮助

.center-x {
  color: red;  //Color red
}

.center-x.flex-column{
  color: blue;  //Color red will be overridden with blue if the class 'flex-comunn' is present
}

可能产出

测试

颜色=红色

测试

颜色=蓝色

Test

Color=默认/父颜色

Test

Color=默认/父颜色

---

希望这能有所帮助。

如果你愿意使用JavaScript，那当然。你在寻找纯CSS解决方案吗？我可以想出一个解决方案，但是正如spacer提到的，您最好使用javascript来完成这项任务。是的，我更喜欢纯css/sassHow。您是否计划在css中添加样式

flex-direction:column

？是否处于运行时？@GibinEalias否，它已添加到标记（.flex列）