柔性盒，導航菜單和響應

Question

我有一個導航菜單，調整特定的窗口大小。工作得很好，但我有一個問題，其中導航列表居於其父div，但同一個div中的徽標沒有。下面是代碼：

HTML

<nav id="top_menu"> 
    <div id="logo"> <img src="images/logo.svg"> </div> 
    <ul class="navigation"> 
     <li data-slide="1">Home</li> 
     <li data-slide="2">Skills</li> 
     <li data-slide="3">Over mij</li> 
     <li data-slide="4">Portfolio</li> 
     <li data-slide="5">Contact</li> 
    </ul> 
</nav> 

CSS（薩斯與波旁混入）

// NAVIGATION 

#top_menu { 
@include display(flex); 
@include flex-flow(row wrap); 
@include justify-content(flex-start); 
@include align-content(center); 
position: fixed; 
width: 100%; 
top: 48px; 
left: 0; 
background-color: white; 
height: 80px; 
z-index: 1; 

@media screen and (max-width:960px) { 
    height: 60px; 
    top: 36px; 
} 

@media screen and (max-width:640px) { 
    top: 0; 
    height: auto; 
    @include flex-flow(column wrap); 
    @include justify-content(center); 
    @include align-content(center); 
} 
} 

#logo { 
display: block; 
margin-left: 3%; 
width: 12%; 
max-width: 150px; 
min-width: 100px; 

@media screen and (max-width:640px) { 
    margin: 0; 
    width: 100%; 
} 

img { 
    position: relative; 
    width: 100%; 
    max-width: 150px; 
    min-width: 100px; 
} 

} 

.navigation{ 
width: 82%; 
list-style: none; 
margin: 0; 

@include display(flex); 
@include flex-flow(row wrap); 
@include justify-content(flex-start); 
@include align-content(center); 

//@media all and (max-width:800px) { 
// @include justify-content(space-around); 
//} 

@media all and (max-width:960px) { 
    width: 75%; 
    @include justify-content(space-around); 
} 

@media all and (max-width:640px) { 
    width: auto; 
    @include flex-flow(column wrap); 
    padding: 0; 
} 

li { 
color: black; 
text-decoration: none; 
display: block; 
margin: 0 20px 0 20px; 
padding: 10px; 

font-family: 'PT Sans', sans-serif; 
font-size: 20px; 
text-transform: uppercase; 
line-height: 40px; 

@media all and (max-width:960px) { 
    margin: 0; 
    font-size: 18px; 
    line-height: 30px; 
} 

@media all and (max-width:640px) { 
    text-align: center; 
    padding: 10px; 
} 

    &:hover,&.active { 
     box-shadow: 0px 10px 0px 0px rgba(245, 86, 78, 1); 
     color: #333; 
     font-weight: bold; 
     cursor:pointer; 

     @media screen and (max-width: 960px) { 
      box-shadow: 0px 6px 0px 0px rgba(245, 86, 78, 1); 
     } 
    } 
} 
} 

我已經發現了迄今爲止的是，它並沒有真正把兩個div的在彼此之下;將導航寬度更改爲較低或較高的值可更改徽標的位置。然而，我無法找到如何解決這個問題，並讓標識堅持在導航中心位置上方。我很喜歡彈性盒，但有時難以理解。我在這裏做錯了什麼？

你可以看到這裏的問題：http://de-kleijn.com/test/ndk/

Answer 1

的問題是，您使用的對齊內容特性，當你需要使用對齊項。對齊項目用於控制項目在同一行上的對齊方式。對齊內容用於控制行相對於其他行的對齊方式。

http://codepen.io/cimmanon/pen/yAIKs

.navigation{ 
    width: 82%; 
    list-style: none; 
    margin: 0; 
    border: 1px solid; 

    @include display-flex; 
    @include flex-flow(row wrap); 
    @include justify-content(flex-start); 
    @include align-items(center); 
} 

Answer 2

flex-box是安靜知道並不算固體不過，我會用display:table至極從IE8的作品。 這裏是一個例子，修改圖像和字體大小的行爲。 http://codepen.io/anon/pen/fktCL

#top_menu { 
    display:table; 
    width:100%; 
    text-align:center; 
    background:gray linear-gradient(to bottom, #555 , #eee); 
    padding:5px; 
    box-shadow:0 0 5px; 
} 
#logo , .navigation{ 
    display:table-cell; 
    vertical-align:middle; 
    margin:0; 
    padding:0; 
    text-align:justify; 
    font-size: 20px; 
    line-height:0; 
    width:18%; 
} 
.navigation { 
    width:82%; 
} 
.navigation li { 
    display:inline-block; 
    color: black; 
    text-decoration: none; 
    margin: 0 20px 0 20px; 
    padding: 10px; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 1em; 
    text-transform: uppercase; 
    line-height: 2em; 
} 
.navigation:after { 
    content:''; 
    display:inline-block; 
    width:100%; 
    vertical-align:top; 
} 
img { 
    width:100%; 
    min-height:100px; 
    max-height:250px;; 
    max-width: 250px; 
    min-width: 100px; 
    vertical-align:top; 
    display:block; 
    margin: 2px auto; 
} 
@media all and (max-width:960px) { 
    #logo , .navigation 
    { 
    display:block; 
    font-size:0.8em; 
    width:100%; 
    } 
    #logo img { 
    width:100px;} 
} 

代碼更新來調整圖像，直到菜單下拉