CSS flex end by default when only one item in container

Question

I have a container that uses flex like a navbar so i have left and right items using space between property. My issue is that sometimes the left items are non existent and I would like the right items to stay on the right side still. Here is an example:

<div class="container">
  <div>
  Stay on left
  </div>
  
  <div>
  Stay on right
  </div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

When I remove the stay on left div I still need the stay on right div to stay on the right side of the container

use margin-left: auto on your second element – Temani Afif May 31 '21 at 20:28 — Temani Afif, May 31 '21 at 20:28
@TemaniAfif this is the correct answer I was looking for! – ousmane784 May 31 '21 at 20:46 — ousmane784, May 31 '21 at 20:46

score -1 · Answer 1 · answered May 31 '21 at 20:24

-1

    <div class="container">
  <div>
  Stay on right
  </div>
  
  <div>
  Stay on left
  </div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

answered May 31 '21 at 20:24

nickfury

29
3

When they are both in the container it is reverse – ousmane784 May 31 '21 at 20:44
Not if the the "stay on left" div is placed after the "Stay on right" div. the main idea is to keep the div to the right when one of both is removed – nickfury May 31 '21 at 21:16

CSS flex end by default when only one item in container

1 Answers1