Jak przesunąć div'a na drugi koniec rodzica

Question

Witam, robię design paska xp i chcę zrobić postęp, czyli ile ma obecnie xp oraz ile mu brakuje do następnego poziomu. Jak przesunąć div'a na drugi koniec rodzica bez użycia transform: translate albo marginów

          <div class="xp-progress">
            <div class="current-xp">0</div>
            <div class="xp-u-need-to-earn">1000</div>
          </div>

.xp-progress {
  width: 100%;
  height: 30;
  background: #0064b1;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px;
}

.current-xp {
  font-size: 14px;
  width: auto;
  height: auto;
  margin-left: 5px;
}

.xp-u-need-to-earn {
  font-size: 14px;
  width: auto;
  height: auto;
  margin-right: 5px;
}

Na zdjęciu użyłem transform: translate, żeby zobrazować jak ma to wyglądać

Comments

https://www.w3schools.com/howto/howto_js_progressbar.asp

---

W HTML-u jest element <progress>, który z grubsza oferuje to, co w propozycji od W3S trzeba implementować w JS-ie.

Answer 1

Skoro korzystasz z Flexboxa, to możesz użyć property order, aby zmienić kolejność danego elementu (dziecka) wizualnie przesuwając go. Ewentualnie nadaj parentowi pozycjonowanie relatywne, a dziecku absolutne i right na 0.

Comments

Dziękuję :)

Answer 2

Możesz też ustawić w .xp-progress   jeżeli używasz display: flex;

justify-content: space-between;