在CSS中嵌套Flexboxes

我開始了一個學校項目的網站，我儘管試用Flexbox CSS佈局會很好。在CSS中嵌套Flexboxes

但我有一個小問題嵌套他們與我的標題，其中包含徽標圖像和導航欄。這裏是HTML：

<header id="logo-nav"> 
    <img src="logo.png" alt="mnml" id="logo"> 
    <nav id="navigation"> 
    <ul> 
     <li class="nav-button"><a href="#about">About</a></li> 
     <li class="nav-button"><a href="#goals">Goals</a></li> 
     <li class="nav-button"><a href="#schedules">Schedules</a></li> 
     <li class="nav-button"><a href="#form">Contact</a></li> 
    </ul> 
    </nav> 
</header>

我想完成的是有標誌的第三部分和導航鏈接的其餘部分。我雖然最好的辦法是將標誌和導航欄作爲標題框內的框，但我希望將導航欄作爲鏈接的父框，以便將它們作爲靈活框對待。我的CSS到目前爲止：

#logo-nav { 
display: flex; 
display: -moz-flex; 
display: -webkit-flex; 
flex-direction: row; 
-moz-flex-direction: row; 
-webkit-flex-direction: row; 
max-width: 100%; 
margin: 0 auto; 
} 

#logo { 
flex:4; 
-moz-flex:4; 
-webkit-flex:4; 
} 

#navigation { 
flex:6; 
-moz-flex:6; 
-webkit-flex:6;flex-direction: row; 
-moz-flex-direction: row; 
-webkit-flex-direction: row; 
} 

#navigation .nav-button { 
flex:4; 
-moz-flex:4; 
-webkit-flex:4 

}

但當然，這是行不通的。有任何想法嗎？

來源

2014-01-30 nakkeru

什麼並不瞭解它的工作？ – cimmanon

導航按鈕的行爲不像框。你有嘗試過嗎？無論我在Chrome還是Firefox（兩者都是最新版本）上試用它，它都不起作用。 – nakkeru

我怎麼試試？你沒有提供演示。我不應該*嘗試*找出「不起作用」的含義。 – cimmanon

我假設通過「這是行不通的」你的意思是列表中的項目不屈曲。這是因爲flex速記只適用於flex項目，這是flex容器的子項。由於ul及其後代均不是彈性容器的子代，因此 ~~它們保留其正常顯示值。~~ 它們不參與柔性格式化上下文，並且不受flex的影響。

爲了flex要應用，你需要聲明ul是display: flex;

#navigation ul { 
    display: flex; 
    padding: 0; 
}

http://jsfiddle.net/6E6L6/7/

來源

2014-01-30 17:28:09 Stigma

[This]（http://jsfiddle.net/6E6L6/10/）是另一種方法（如果你關心垂直居中每個鏈接）。 – Stigma

非常感謝。現在正在工作。順便說一句，我看到這個jsFiddle在線上共享代碼非常有用，我一定會使用它;） – nakkeru

在CSS中嵌套Flexboxes

回答

相關問題