Переместите div в правую сторону, используя flex

Question

Как задать интервал между различными делениями, используя flex box.Я хочу переместить последние 3 деления в правую часть экрана, чтобы между ними было одинаковое пространство

.flexBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
  margin: 20px;
  font-family: myriad-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
}

.flexBox > div:nth-child(2),
.flexBox > div:nth-child(3),
.flexBox > div:nth-child(4) {
  margin-left: auto;
}

<div class="flexBox">
  <div><img src="http://placehold.it/100x100" alt=""></div>
  <div><a class="navbutton" href="https://google.com">Home</a></div>
  <div><a class="navbutton" href="https://google.com">FAQ</a></div>
  <div><a class="navbutton" href="https://google.com">Log in</a></div>
</div>

Answer 1

Есть много решений для этого.Главное, что нужно сделать, это сгруппировать элементы навигации (ссылки) в пределах своего собственного контейнера

.flex {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  list-style: none;
}

.nav__item {
  display: inline-block;
}

.nav__item:not(last-of-type) {
  margin-right: 30px;
}

<div class="flex">
  <div> <img src="https://placehold.it/60x60"/> </div>
  <ul class="nav">
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >Home</a></li>
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >FAQ</a></li>
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >Log in</a></li>
  </ul>
</div>

Примечание: если вас не интересует конкретное поле между элементами навигации, НО, скажем, ваша навигация имеет ширину 300 пикселей и вы просто хотите, чтобы элементы былина равных расстояниях:

.nav {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__item {
  // now you don't need any code here
}

Answer 2

Вы можете дать margin-right: auto .flexBox > div:first-child, чтобы подтолкнуть других братьев и сестер вправо, а затем просто отрегулировать margin из .flexBox > div:nth-child(3), который является средним среди трех, для достижения равного расстояния междуих:

body {margin: 0}

.flexBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
  margin: 20px;
  font-family: myriad-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
  background: lightblue; /* demo */
}

.flexBox > div:first-child {
  margin-right: auto;
}

.flexBox > div:nth-child(3) {
  margin: 0 10px;
}

/* addition */
img {
  display: block; /* or "vertical-align: middle" removes bottom margin/whitespace */
}

<div class="flexBox">
  <div><img src="http://placehold.it/100x100" alt=""></div>
  <div><a class="navbutton" href="https://google.com">Home</a></div>
  <div><a class="navbutton" href="https://google.com">FAQ</a></div>
  <div><a class="navbutton" href="https://google.com">Log in</a></div>
</div>

Answer 3

Быстрое решение для вас:

<div class="flexBox">
    <div class="logo-wrap"> <img src="{/logo.svg}"/> </div>
    <div><a class="navbutton" href="https://Google.com" >Home</a></div>
    <div><a class="navbutton" href="https://Google.com" >FAQ</a></div>
    <div><a class="navbutton" href="https://Google.com" >Log in</a></div>
</div>

<style>
    .flexBox {
        display:flex;
        align-items: center;
    }

    .logo-wrap {
        margin-right: auto;
    }
    .navbutton {
        padding: 0 10px;
    }
</style>