flexbox условное выравнивание / выравнивание

Question

Можно ли иметь условный CSS на основе другого свойства?

Я хочу написать несколько помощников для выравнивания flexbox:

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

.center-x {
    ...
}

содержание center-x зависит от того, имеет ли элемент flex-direction: column или нет

Могу ли я так, чтобы центр-х вел себя по-разному в зависимости от направления изгиба элементов?

Answer 1

Как уже упоминалось в комментариях OP, свойство flex-direction: column будет добавлено к элементу HTML с использованием flex-column class.

В этом случае, я надеюсь, что приведенный ниже пример поможет.

.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

Надеюсь, это поможет.