Flexbox justify-content屬性停止在媒體查詢中工作

Question

我一直在嘗試使用flex CSS將我的徽標和無序列表垂直居中放置在我的標題中，這是我成功做到的，但現在我無法獲取它們浮到標題的左側和右側。似乎是float:left和float:right值，我以前還不會影響孩子的div，所以我添加

justify-content: space-between; 

到頁眉實現這一目標。當瀏覽器爲全寬時，它似乎工作，但是當我的第一個媒體查詢開始於1080px時，我已將無序列表設置爲消失，並被導航菜單圖標取代。出於某種原因，菜單圖標拒絕浮動到標題的右側 - 有誰知道爲什麼？

.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 –儘管顯示只有兩個彎曲的物品（標識和導航圖標），實際上包含三個彎曲的物品。

第三項是主導航菜單，因爲它包含display: none的後代，所以無法看到。

因此，與space-between容器設置是這樣的：

LOGO         NAV ICON         NAV MENU 

當屏幕夠寬，NAV圖標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不起作用的原因是因爲float屬性在flex容器中被忽略。

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

• float和clear有柔性的項目沒有任何影響，並且不把它亂流。