justify-content: ruang-antara dalam Flexbox nampaknya tidak berfungsi

Question

Saya telah cuba menukar banyak perkara dalam CSS menggunakan kelas dan ID, tetapi nampaknya tiada cara untuk mendapatkan kedua-dua imej berada di bahagian paling jauh skrin (logo di hujung kiri, profil dihidupkan paling kanan).

Telah mencuba pelbagai perkara seperti text-align 和不同的 justify-contents tetapi nampaknya tiada kesan.

Ini kodnya:

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav div {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0px;
  padding: 0;
  border: 0;
  margin: 0;
}

<div class="top-nav">
  <div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
  <div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>

Answer 1

justify-content kini tidak melakukan apa-apa kerana ia ditetapkan pada div tanpa display:flex. Jika anda mahukan div yang berasingan untuk imej, letakkan justify-content:space- Antara pada div yang mengandunginya, iaitu div navigasi atas.