Переместите элемент вправо с помощью Flexbox

Question

По сути, я пытаюсь переместить div меню гамбургера в правую часть страницы с помощью Flexbox, но он отказывается сдвинуться с места.Я пробовал материал flex-start / flex-end, я пробовал поле margin-right / left auto, но, похоже, оно не работает.

Единственное, что заставляет его работать, это то, что я помещаю фиксированное левое поле, но когда размер экрана уменьшается, это в основном выталкивает логотип с экрана.

Что не так с моим кодом?

/*Parent Element*/

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
}


/*Children*/

#logo {
  flex: 2;
  justify-self: flex-start;
  max-width: 6em;
  margin-right: auto;
}

#mobile-nav {
  flex: 1;
  justify-self: flex-end;
  margin-left: auto;
}

<div id="nav-bar">
  <div id="logo"><img src="./img/logo.png" alt=""> </div>
  <div id="mobile-nav">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <ul id="main-nav">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li><a href="''" class="btn">CTA</a></li>
  </ul>
</div>

Answer 1

Flex auto поля работают, занимая свободное пространство в направлении поля.Например, margin-right: auto занимает все свободное пространство справа от элемента.Это приводит к тому, что элемент и братья и сестры остаются слева от него до самого левого угла, а брать братья и сестры вправо - до правого.

Проблема в вашем коде состоит в том, что у вас есть flex-grow (через сокращенное свойство flex).Ну, flex-grow, как и auto поля, работает, потребляя свободное место.Поскольку flex-grow распределяет все свободное пространство на линии, поля auto не могут ничего сделать (для них нет свободного места для использования).

Свойство justify-content также работает через распределениесвободного места, и будет бесполезен, когда в игре будет flex-grow.

Решение: удалить flex-grow.

Вот более подробное объяснение с иллюстрациями:

• Почему в CSS Flexbox отсутствуют свойства "justify-items" и "justify-self"?

Answer 2

Вот как бы я это сделал.

#nav-bar{
 display: flex;
 flex-flow: row;
 width: 100%;
 justify-content: space-between;
}

#logo{}

#mobile-nav{}