CSS: How to shift an element to right if it's sibiling is hidden?

Issue

I have three links… link-a link-b link-c.

Under certain cirtcunmstances link-c is hidden, how can I make the link-b to shift right if link-c is not present, and to the middle link-c is present? (these 3 links are inside a display:flex div)

Thank you 🙂

Solution

You can use justify-content: space-between; for that purpose . If you specify div width than link will span upto the width else whole width be in consideration.

Try to remove .hidden class to see effect of justify-content: space-between;

div {
  display: flex;
  justify-content: space-between;
}

.hidden {
  display: none;
}

<div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#" class="hidden">Link 3</a>
</div>

Answered By – Rana

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0