如何在降序元素上應用CSS3 flex樣式？

Question

我剛剛發現CSS3的display: flex;屬性，並試圖將其應用到我的網站的粘頭上，但我遇到了一個問題。

目標是均勻地間隔開整個頭部的整個寬度都環節，但這似乎是不可能的，當語義分組的元素，例如<nav>標籤。

見的jsfiddle例如：https://jsfiddle.net/9bua0n7o/

<header> 
    <div class="logo"> 
    Logo 
    </div> 

    <nav class="navigation"> 
    <a href="#">Home</a> 
    <a href="#">FAQ</a> 
    <a href="#">Contact</a> 
    </nav> 

    <div class="search"> 
    <a href="#">Search</a> 
    </div> 

    <div class="login"> 
    <a href="#">Register</a> 
    <a href="#">Login</a> 
    </div> 

</header> 

CSS：

header { 
    width: 100%; 
    height: 60px; 
    line-height: 60px; 

    display: flex; 
    flex-flow: row wrap;  
    justify-content: space-between; 

    position: fixed; 
    top: 0; 
    left: 0; 

    padding: 0 25px; 
    box-sizing: border-box; 

    background: #ccc; 
} 

Answer 1

你可以這樣做。

在這裏，我給每個包裝（導航，搜索等）彈性值匹配他們有的孩子的數量。

這基本上意味着包裝將佔用大量的可用空間，並使項目均勻分佈。

然後我將每個鏈接設置爲flex: 1，使它們佔據其全部空間。

header { 
 
    width: 100%; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0 25px; 
 
    box-sizing: border-box; 
 
    background: #ccc; 
 
} 
 

 
header .logo, 
 
header .search { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
header .navigation { 
 
    flex: 3; 
 
    display: flex; 
 
} 
 

 
header .login { 
 
    flex: 2; 
 
    display: flex; 
 
} 
 

 
header .navigation a, 
 
header .search a, 
 
header .login a { 
 
    flex: 1; 
 
}

<header> 
 
    <div class="logo"> 
 
    Logo 
 
    </div> 
 

 
    <nav class="navigation"> 
 
    <a href="#">Home</a> 
 
    <a href="#">FAQ</a> 
 
    <a href="#">Contact</a> 
 
    </nav> 
 

 
    <div class="search"> 
 
    <a href="#">Search</a> 
 
    </div> 
 

 
    <div class="login"> 
 
    <a href="#">Register</a> 
 
    <a href="#">Login</a> 
 
    </div> 
 

 
</header>

Answer 2

我想出瞭解決的方法是相似的（雖然不完全相同）至LGSon的上方。

1）I增加了一個鏈接到.logo：

<div class="logo"> 
<a href="#">Logo</a> 
</div> 

2）然後我給所有標頭中的元件相同的flex樣式：

.logo, 
.logo a, 

.navigation, 
.navigation a, 

.search, 
.search a, 

.login, 
.login a { 
flex: 1 0 auto; 
} 

3）最後，我覆蓋.navigation和.login的flex-grow款式：

.navigation { 
flex-grow: 3; 
} 

.login { 
flex-grow: 2; 
} 

實施例中全：

header, .logo, .navigation, .search, .login { 
 
display: flex; 
 
justify-content: space-between; 
 
} 
 

 
.logo, .navigation, .search, .login, .logo a, .navigation a, .search a, .login a { 
 
flex: 1 0 auto; 
 
} 
 

 
.navigation { 
 
flex-grow: 3; 
 
} 
 

 
.login { 
 
flex-grow: 2; 
 
} 
 

 
header { 
 
width: 100%; 
 
height: 60px; 
 
line-height: 60px; 
 

 
position: fixed; 
 
top: 0; 
 
left: 0; 
 

 
padding: 0 25px; 
 
box-sizing: border-box; 
 
background: #ccc; 
 
}

<header> 
 

 
<div class="logo"> 
 
<a href="#">Logo</a> 
 
</div> 
 

 
<nav class="navigation"> 
 
<a href="#">Home</a> 
 
<a href="#">FAQ</a> 
 
<a href="#">Contact</a> 
 
</nav> 
 

 
<div class="search"> 
 
<a href="#">Search</a> 
 
</div> 
 

 
<div class="login"> 
 
<a href="#">Register</a> 
 
<a href="#">Login</a> 
 
</div> 
 

 
</header>

Answer 3

雖然（如2016年7月）肯定不是生產準備溶液，將CSS Display Module Level 3 Working Draft定義display: contents屬性，它指示：

元素本身不會生成任何框，但其子元素和僞元素仍然會正常生成框。爲了框生成和佈局的目的，必須將元素視爲已被其子元素和文檔樹中的僞元素替換。

適用於您的解決方案，它可能是這個樣子（目前只在Firefox支持）：

header { 
 
    width: 100%; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0 25px; 
 
    box-sizing: border-box; 
 
    background: #ccc; 
 
} 
 

 
.header-section { 
 
    display: contents; 
 
} 
 

 
.header-section a { 
 
    flex: 1; 
 
}

<header> 
 
    <div class="logo"> 
 
    Logo 
 
    </div> 
 

 
    <nav class="header-section navigation"> 
 
    <a href="#">Home</a> 
 
    <a href="#">FAQ</a> 
 
    <a href="#">Contact</a> 
 
    </nav> 
 

 
    <div class="header-section search"> 
 
    <a href="#">Search</a> 
 
    </div> 
 

 
    <div class="header-section login"> 
 
    <a href="#">Register</a> 
 
    <a href="#">Login</a> 
 
    </div> 
 
</header>

希望這至少提供了一些教育上提出了新的CSS功能