Comment garder les éléments alignés avec "justify-content : space-between" si certains d'entre eux ont "display:none" ?

Question

CodePen ici.

Comment modifier le style CSS pour que les éléments "LEFT", "CENTER" et "RIGHT" restent à leur place si "display:none" est appliqué à certains d'entre eux ?

.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>

Merci !

Answer 1

Au lieu d'utiliser display pour masquer l'élément, utilisez la propriété visibility: hidden . Ainsi, les éléments visibles ne bougeront pas de leur place dans la mise en page.

Vous pouvez également utiliser opacity pour obtenir le même résultat.

Utilisation de visibility: hidden empêchera l'élément de répondre aux événements liés aux pointeurs, alors que l'utilisation de l'option opacity: 0 n'empêchera pas l'élément de répondre aux événements liés aux pointeurs. Utilisez ce qui vous semble le plus approprié pour votre cas d'utilisation.

L'extrait de code suivant montre un exemple où l'élément de gauche est masqué tandis que les éléments alignés au centre et à droite sont affichés à leur place dans la mise en page.

.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>