使用 Flexbox 将元素向右移动

Question

基本上，我正在尝试使用 Flexbox 将我的汉堡菜单 div 移动到页面的右侧，但它拒绝让步。我试过 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

这就是我的做法。

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

#logo{}

#mobile-nav{}

Answer 2

Flex auto 边距通过消耗边距方向的可用空间来工作。例如，margin-right: auto 会占用元素右侧的所有可用空间。这具有将元素和兄弟元素固定在其左侧一直到左侧的效果，同时将兄弟元素固定在其右侧一直到右侧。

您的代码中的问题是您有flex-grow（通过flex 速记属性）。好吧，flex-grow，就像auto 边距一样，通过消耗可用空间来工作。由于flex-grow 分配了线上的所有可用空间，所以auto 边距无能为力（没有可用空间供他们使用）。

justify-content 属性也通过分配可用空间起作用，当flex-grow 起作用时将无用。

解决方法：删除flex-grow。

这里有更详细的插图说明：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?