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

Question

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

justify-content: space-between;

到标题来实现这一点。它似乎在浏览器全宽时有效，但是当我的第一个媒体查询从 1080 像素开始时，我已将无序列表设置为消失并被导航菜单图标取代。出于某种原因，菜单图标拒绝 float 到标题的右侧——有人知道为什么吗？

.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%;
}

}

<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>

Answer 1

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

justify-content: space-between 在媒体查询中没有像您期望的那样工作的原因是您的 flex 容器 – .header – 尽管只显示了两个 flex 元素(标志和导航图标)，实际上包含三个 flex 元素。

第三项是主导航菜单，看不到，因为它包含一个带有 display: none 的后代。

所以使用 space-between 容器是这样设置的:

LOGO                                    NAV ICON                                   NAV MENU

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

但是当媒体查询以 1080 像素开始时，display: none 从 NAV ICON 切换到 NAV MENU 的后代。所以即使 NAV MENU 消失了，它仍然占据那个空间，NAV ICON 留在中间。

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

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

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

• float and clear have no effect on a flex item, and do not take it out-of-flow.