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>