Question

我一直在尝试使用flex CSS在我的标题中垂直居中我的徽标和无序列表，我已经成功了，但现在我无法让它们向左浮动和标题的右侧。我之前的float:left和float:right值似乎不会影响子div，所以我已添加

justify-content: space-between;

到标题来实现这一点。它似乎在浏览器是全宽时起作用，但是当我的第一个媒体查询以1080px开始时，我已将无序列表设置为消失并被导航菜单图标替换。由于某种原因，菜单图标拒绝浮动到标题的右侧 - 有没有人知道为什么？

＆＃13;

.header {
width: 75%;
height: 100px;
margin: 0 auto; 
display: flex;
align-items: center;
justify-content: space-between;
}

img.standard.logo { 
height: 40px;
width: 360px; 
}

.header nav ul{
display:block;
padding:0;
margin-top:12px;
margin-bottom:0px;
list-style:none; 
}

@media only screen 
and (min-width : 0px) 
and (max-width : 1080px) {


img.standard.logo {
height: 38px;
width: 342px;
}

img.menu.button { 
display:block;
margin-top:3px;
width:35px;
height:35px; 
background-size: 100%;
}

}

＆＃13;

<header class="header">
   <!-- LOGOS -->
   <a href="#">
   <img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2015/12/Logo-2.png">
   <img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Logo_White.png"></a>
   <!-- LOGOS -->
   <img class="menu button" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Menu.png">
   <!-- HEADER NAVIGATION MENU --> 
   <nav class="header-nav">
      <div class="menu-header-menu-container">
         <ul id="menu-header-menu" class="menu">
            <li id="menu-item-463">
               <a href="#">WORK</a>
               <ul class="sub-menu">
                  <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                  <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                  <li id="menu-item-478"><a href="#">MACRO</a></li>
                  <li id="menu-item-477"><a href="#">CITIES</a></li>
                  <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                  <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
               </ul>
            </li>
            <li id="menu-item-10"><a href="#">ABOUT</a></li>
            <li id="menu-item-464"><a href="#">SHOP</a></li>
            <li id="menu-item-923">
               <a href="#">SOCIAL</a>
               <ul class="sub-menu">
                  <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                  <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                  <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
               </ul>
            </li>
            <li id="menu-item-14"><a href="#">CONTACT</a></li>
         </ul>
      </div>
   </nav>
</header>

＆＃13;

Answer 1

尝试将margin-left: auto添加到媒体查询中的导航菜单图标。

justify-content: space-between在媒体查询中无法正常工作的原因是您的弹性容器 - .header - 尽管只显示了两个弹性项目（徽标和导航图标），但实际上包含三个弹性项目。

第三项是主导航菜单，由于它包含display: none的后代，因此无法看到。

所以对于space-between，容器的设置如下：

LOGO                                    NAV ICON                                   NAV MENU

当屏幕足够宽时，NAV ICON有display: none。所以space-between按预期工作：LOGO和NAV MENU在相对的边缘对齐。

但是当媒体查询以1080px开始时，display: none会从NAV ICON切换到 NAV MENU的后代。因此即使NAV MENU消失，它仍然占据那个空间，并且NAV ICON保持在中间。

您可以将display: none应用于NAV MENU本身，或使用flex auto页边距强制NAV ICON到右边缘。

此外，float: right和float: left不起作用的原因是因为在Flex容器中忽略了float属性。

3. Flex Containers: the flex and inline-flex display values


float和clear对Flex项目没有任何影响，也不会将其从流量中删除。

Flexbox justify-content属性停止在媒体查询中工作

1 个答案: