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?

使用Flexbox将元素向右移动

2 个答案: