How do I keep elements aligned with "justify-content: space-between" if some of them have "display:none"?

Question

CodePen here.

How do I change CSS styling to keep "LEFT", "CENTER" and "RIGHT" where they are if some of them have "display:none" applied to them?

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

Thanks!

Answer 1

Instead of using display property to hide the element, use visibility: hidden. This will keep the visible elements from moving from their place in the layout.

You could also use opacity property to achieve the same result.

Using visibility: hidden will prevent the element from responding to pointer-events whereas using opacity: 0 will not stop the element from responding to pointer-events. Use whatever seems more suitable for your use-case.

Following code snippet shows an example where left element is hidden while center and right aligned elements are shown in their correct place in the layout.

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