降下要素にCSS3フレックススタイルを適用するにはどうすればよいですか？

Question

CSS3のdisplay: flex;プロパティを見つけて、それを私のウェブサイトのスティッキーヘッダーに適用しようとしましたが、問題が発生しました。 、<nav>タグ

目標は均一空間にヘッダの全幅にわたるすべてリンクしていたが、意味的に持つ要素をグループ化するとき、これは不可能だ、例えば。 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

あなたはこのように行うことができます

はjsfiddle例を参照してください。

ここでは、それぞれのラッパー（ナビゲーション、検索など）に、子どもの量に一致するフレックス値を与えました。

これは基本的に、ラッパーが利用可能なスペースの大部分を占有し、アイテムを均等に広げることを意味します。

次に、各リンクを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）最後に、I flex-growのスタイルを.navigationと.loginに変更しました。

フルで

例：

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プロパティを定義します

要素自体はボックスを生成しませんが、子要素と擬似要素は引き続き通常の方法でボックスを生成します。ボックスの生成とレイアウトのために、要素はドキュメントツリー内の子要素と擬似要素に置き換えられたかのように扱われなければなりません。うまくいけば、これは、少なくとも提案された新しい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; 
 
} 
 

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

：あなたのソリューションに適用される

は

、それは（現在はFirefoxでサポートされている）、このようになります。機能