最大幅のFlexboxサイドバー

コンテンツエリア（アーティクル）に影響を与えずに、フレックスボックスレイアウトのサイドバーにmax-widthを設定できますか？最大幅を変更すると、コンテンツ領域にも影響します。私は現在の機能を欲しがっています。レイアウトは反応的ですが、サイドバーに最大幅を設定しています。最大幅のFlexboxサイドバー

Codepen

HTML：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

    <div class="flex-container"> 

     <nav class="nav"> 
      <ul> 
       <li><a href="#">Menu1</a></li> 
       <li><a href="#">Menu2</a></li> 
       <li><a href="#">Menu3</a></li> 
      </ul> 
     </nav> 

     <article class="article"> 
      <h1>Lorem ipsum</h1> 
      <p>Lorem ipsum dolor ....</p> 
     </article> 

    </div> 

</body> 
</html>

はCSS：

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    text-align: center; 
} 

.flex-container > * { 
    padding: 15px; 
    -webkit-flex: 1 100%; 
    flex: 1 100%; 
} 

.article { 
    text-align: left; 
} 

.nav { 
    background:#eee; 
} 

.nav ul { 
    list-style-type: none; 
    padding: 0; 
} 

.nav ul a { 
    text-decoration: none; 
} 

@media all and (min-width: 768px) { 
    .nav { 
    text-align:left; 
    -webkit-flex: 1 auto; 
    flex:1 auto; 
    -webkit-order:1; 
    order:1; 
    } 

    .article { 
    -webkit-flex:5 0px; 
    flex:5 0px; 
    -webkit-order:2; 
    order:2; 
    } 
}

出典

2016-08-11 bvcx

今あなたが同じくらい彼らができるように成長するために、両方のあなたの<nav>とあなたの<article>を言っていますこの宣言で：

.flex-container > * { 
    flex: 1 100%; 
}

残りのスペースはauto代わりの100%と一緒に配布される前に、あなたはあなたの<nav>要素のデフォルトサイズを定義する必要があります。 autoキーワードは、「幅と高さのプロパティを調べる」を意味します。右が

.flex-container > .nav { 
    flex: 1 1 auto; 
    max-width: 300px; 
}

ます（この計算を行う際に、パディングが考慮されていないので、それのつもりが実際330pxこと）成長しないと縮小し、決して300ピクセルよりも幅広に

編集をあなたの<nav>を言っています：

は、だから私はいくつかのコードを書き換えなければならなかった、あなたの問題を解決するために、ここに支援するための作業fiddle

出典

2016-08-11 14:34:15

おかげです。私はあなたのソリューションを試して、それは幅の問題を修正しますが、応答する機能を壊します。ソリューションの前に画面サイズを調整すると、画面が小さくなって上部の画面を埋めるときにサイドバーが上になることがわかります。サイドバーの幅を最大限に広げることは可能ですが、小さな画面では上に行くときにサイドバーが画面を満たす機能を維持しますか？助けてくれてありがとう、大変感謝しています。 – bvcx

ああ、私の悪い、私は@メディアのクエリがやっていたことを理解していなかった、私は私の答えを編集するつもりだ –

お手伝いをしてくれてありがとうたくさんありがとう。すべてが今働きます:-) – bvcx

最大幅のFlexboxサイドバー

答えて

関連する問題