Как мне выровнять элементы по "justify-content: пробел между", если некоторые из них имеют "display: none"?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

CodePen здесь.

Как мне изменить стиль CSS, чтобы сохранить «LEFT», «CENTER» и «RIGHT» там, где они есть, если к некоторым из них применено «display: none»?

 .rows {
  display: flex;
  justify-content: space-between;
  height: 4em;
  align-items: center;
}

.row3 .l,
.row3 .c {
  display: none
}

 <div class="rows row3">
  <div class="l">
    LEFT
  </div>
  <div class="c">
    CENTER
  </div>
  <div class="r">
    RIGHT
  </div>
</div>

Спасибо!

1. Вы можете использовать opacity : 0 вместо display : none .

2. Возможно ли использовать visibility: hidden вместо display: none, поскольку это сохранит пространство элементов, не отображая их. Это сработало в вашем codepen.

3. @kevin rob да, непрозрачность: 0 сделала бы это, но вы не можете щелкнуть по любому элементу за ним, в то время как видимость: скрытый позволяет это — зависит от варианта использования.

Ответ №1:

Вместо того, чтобы использовать display свойство для скрытия элемента, используйте visibility: hidden . Это не позволит видимым элементам перемещаться со своего места в макете.

Вы также можете использовать opacity свойство для достижения того же результата.

Использование visibility: hidden предотвратит ответ элемента на события указателя, тогда как использование opacity: 0 не остановит ответ элемента на события указателя. Используйте все, что кажется более подходящим для вашего варианта использования.

Следующий фрагмент кода показывает пример, в котором левый элемент скрыт, в то время как выровненные по центру и правому краю элементы отображаются в их правильном месте в макете.

 .rows {
  display: flex;
  justify-content: space-between;
  height: 4em;
  align-items: center;
}

.row3 .l {
  visibility: hidden;
}

 <div class="rows row3">
  <div class="l">LEFT</div>
  <div class="c">CENTER</div>
  <div class="r">RIGHT</div>
</div>