異なる高さの行を使用したフレックスラップ

Question

ハッシュタグリンクを使用したCSSのみのタブを実装しています。私は非常に近いですが、フレックスラップを正しく動作させることはできません。私はこれをラジオボタンでこれまでやったことがありますし、柔軟性もあります。すべてのタブとすべてのセクションが同じレベルにあるので、私は次のようになります：

body 
    section 
    anchor 
    section 
    anchor 
    ... 

フレックスボックスの順序を使用してすべてのアンカーを最初に表示し、適切にスタイルを設定し、すべてのセクションを幅100％に設定し、flex-wrapを使用して次の行に折り返すことができます。問題は、最初の行の高さを制御できないように思えることです。何が起きてる？

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100vh; 
 
    outline: 1px solid green; 
 
} 
 
body > a { 
 
    padding: 10px; 
 
    margin: 0 5px; 
 
    order: -1; 
 
    flex-grow: 0; 
 
    border: solid gray; 
 
    border-width: 1px 1px 0 1px; 
 
} 
 
body > a:last-of-type { 
 
    order: -2; 
 
} 
 
section { 
 
    flex-grow: 1; 
 
    width: 100%; 
 
    background-color: cornsilk; 
 
    display: none; 
 
    border-top: 1px solid grey; 
 
} 
 
section:last-of-type { 
 
    display: flex; 
 
} 
 
a { 
 
    font-weight: normal; 
 
} 
 
a:last-of-type { 
 
    font-weight: bold; 
 
} 
 
:target { 
 
    display: flex; 
 
} 
 
:target ~ section { 
 
    display: none; 
 
} 
 
:target ~ a { 
 
    font-weight: normal; 
 
} 
 
:target + a { 
 
    font-weight: bold; 
 
}

<section id="advanced"> 
 
\t Advanced Stuff 
 
</section> 
 
<a href="#advanced">Advanced</a> 
 

 
<section id="home"> 
 
\t Home Things 
 
</section> 
 
<a href="#home">Home</a>

Slightly easier to play with jsbin

問題は、最初の行のタブではなく、その内容の高さに崩壊以上の可視部分の高さまで伸ばすことです。特定のheightとmax-heightも無視されているようです。

フレックスボックスでラップするときの問題は、特にラインの高さに関するものです。私はcssとjsの両方でタブを構築する百万の異なる方法を知っています。私は具体的にflex-wrapの深い理解を探しています。

Answer 1

二つのラッパーを使用して初期設定をalign-items: stretchとalign-content: stretchあります。値をflex-startに変更すると、これを無効にすることができます。

しかし、それは問題のほんの一部を解決するようです。また、選択したラッピング項目でコンテナの高さ全体を引き伸ばしたい場合もあります。

これは起こっていません。フレックスアイテムがラップすると、コンテンツを格納するのに必要な最小サイズのみになります。フレキシボックス仕様から

：マルチラインフレックスコンテナ（単一線と一つでも）で

6. Flex Lines

、各ラインの 断面サイズは必要最小限の大きさであります（align-selfによる整列の後に） のフレックスアイテムを含めるには、 行がフレックスコンテナ内でalign-content プロパティで整列されている必要があります。すなわち

、複数の行が行ベースフレックス容器内に存在する場合、各ライン（「クロスサイズ」）の垂直高さがフレックスアイテムを格納する必要「最小サイズであります「」の行に表示されます。

レイアウトを機能させるには、行方向と列方向のフレックスコンテナの組み合わせと、HTMLの調整が必要です。タブの高さは、セクションの高さを計算するためにcalcを使用して知られている場合

Answer 2

は何が起こることは、あなたがそれゆえ、彼らは、ブラウザの高さを埋めるため、ボディは完全な高さになるように設定してから、完全な利用可能なスペースを成長させる部分を教えてくれているsection

からbodyとflex-grow: 1;からheight: 100vhを削除します。

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 1px solid green; 
 
} 
 
body > a { 
 
    padding: 10px; 
 
    margin: 0 5px; 
 
    order: -1; 
 
    flex-grow: 0; 
 
    border: solid gray; 
 
    border-width: 1px 1px 0 1px; 
 
} 
 
body > a:last-of-type { 
 
    order: -2; 
 
} 
 
section { 
 
    width: 100%; 
 
    background-color: cornsilk; 
 
    display: none; 
 
    border-top: 1px solid grey; 
 
} 
 
section:last-of-type { 
 
    display: flex; 
 
} 
 
a { 
 
    font-weight: normal; 
 
} 
 
a:last-of-type { 
 
    font-weight: bold; 
 
} 
 
:target { 
 
    display: flex; 
 
} 
 
:target ~ section { 
 
    display: none; 
 
} 
 
:target ~ a { 
 
    font-weight: normal; 
 
} 
 
:target + a { 
 
    font-weight: bold; 
 
}

<section id="advanced"> 
 
\t Advanced Stuff 
 
</section> 
 
<a href="#advanced">Advanced</a> 
 

 
<section id="home"> 
 
\t Home Things 
 
</section> 
 
<a href="#home">Home</a>

サンプル2、フレックス容器の

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 1px solid green; 
 
    height: 100vh; 
 
} 
 
body > div { 
 
    flex: 0; 
 
    order: 1; 
 
} 
 
section { 
 
    flex: 1; 
 
    background-color: cornsilk; 
 
    display: none; 
 
    border-top: 1px solid grey; 
 
    order: 2; 
 
} 
 
body > div > a { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0 5px; 
 
    border: solid gray; 
 
    border-width: 1px 1px 0 1px; 
 
} 
 
section:last-of-type { 
 
    display: flex; 
 
} 
 
a { 
 
    font-weight: normal; 
 
} 
 
a:first-of-type { 
 
    font-weight: bold; 
 
} 
 
:target { 
 
    display: flex; 
 
} 
 
:target ~ section { 
 
    display: none; 
 
} 
 
:target ~ div a { 
 
    font-weight: normal; 
 
} 
 
#home:target ~ div a[href='#home'], 
 
#advanced:target ~ div a[href='#advanced'] { 
 
    font-weight: bold; 
 
}

<section id="advanced"> 
 
\t Advanced Stuff 
 
</section> 
 

 
<section id="home"> 
 
\t Home Things 
 
</section> 
 

 
<div> 
 
    <a href="#home">Home</a> 
 
    <a href="#advanced">Advanced</a> 
 
</div>

Answer 3

私は唯一のソリューションを参照してください。

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100vh; 
 
} 
 

 
body > a { 
 
    padding: 0 10px; 
 
    margin: 0 5px; 
 
    order: -1; 
 
    flex: 0 1 auto; 
 
    border: solid gray; 
 
    border-width: 1px 1px 0 1px; 
 
    line-height: 30px; 
 
} 
 

 
body > a:last-of-type { 
 
    order: -2; 
 
} 
 

 
section { 
 
    flex: 0 1 100%; 
 
    background-color: cornsilk; 
 
    display: none; 
 
    border-top: 1px solid grey; 
 
    height: calc(100% - 32px) 
 
} 
 

 
section:last-of-type { 
 
    display: block; 
 
} 
 

 
a { 
 
    font-weight: normal; 
 
} 
 

 
a:last-of-type { 
 
    font-weight: bold; 
 
} 
 

 
:target { 
 
    display: block; 
 
} 
 

 
:target ~ section { 
 
    display: none; 
 
} 
 

 
:target ~ a { 
 
    font-weight: normal; 
 
} 
 

 
:target + a { 
 
    font-weight: bold; 
 
}

<section id="advanced"> 
 
    Advanced Stuff 
 
</section> 
 
<a href="#advanced">Advanced</a> 
 

 
<section id="home"> 
 
    Home Things 
 
</section> 
 
<a href="#home">Home</a>