flexbox条件对齐/对齐

Question

是否可以根据其他属性获得条件css？

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

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

.center-x {
    ...
}

center-x的内容取决于元素是否具有flex-direction: column或不是

我可以以某种方式让center-x根据元素的flex方向表现不同吗？

Answer 1

如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
}

可能的输出

<span class="center-x">Test</span>颜色=红色

<span class="center-x flex-column">Test</span>颜色=蓝色

<span class="flex-column">Test</span>颜色=默认/父颜色

<span class="">Test</span>颜色=默认/父颜色

CODEPEN

希望这有帮助。