Как отодвинуть элемент в другой конец блока

223

28 сентября 2018, 16:30

Пробовал это сделать с помощью justify-content:flex-end, но это почему-то не сработало. Как это лучше всего сделать?

.nav-content-bot { 
  display: flex; 
} 
 
.top-menu { 
  justify-content: flex-end; 
}

<div class="nav-content-bot"> 
  <div class="logo"> 
    <h2 class="logoText">Explore</h2> 
  </div> 
  <nav class="top-menu"> 
    <a href="#">Home</a> 
    <a href="#">Destinaton</a> 
    <a href="#">Discount</a> 
    <a href="#">About</a> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
  </nav> 
</div>

Answer 1

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

<div class="nav-content-bot"> 
  <div class="logo"> 
    <h2 class="logoText">Explore</h2> 
  </div> 
  <nav class="top-menu"> 
    <a href="#">Home</a> 
    <a href="#">Destinaton</a> 
    <a href="#">Discount</a> 
    <a href="#">About</a> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
  </nav> 
</div>

Или так:

.nav-content-bot { 
  display: flex; 
} 
 
.top-menu { 
  margin-left: auto; 
}

<div class="nav-content-bot"> 
  <div class="logo"> 
    <h2 class="logoText">Explore</h2> 
  </div> 
  <nav class="top-menu"> 
    <a href="#">Home</a> 
    <a href="#">Destinaton</a> 
    <a href="#">Discount</a> 
    <a href="#">About</a> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
  </nav> 
</div>

Answer 2

Или так (без лишних блоков):

header { 
  position: relative; 
} 
 
h2, 
nav { 
  display: inline; 
} 
 
nav { 
  position: absolute; 
  right: 0; 
}

<header> 
  <h2>Explore</h2> 
  <nav class="top-menu"> 
    <a href="#">Home</a> 
    <a href="#">Destinaton</a> 
    <a href="#">Discount</a> 
    <a href="#">About</a> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
  </nav> 
</header>