Flexの行と列のヘルプ、レイアウトが意図したとおりに表示されない

-1

私は数日間このことに悩まされています。何があってもレイアウトを希望どおりにすることはできません。誰も私がこのレイアウトを完了するのを助けることができるので、私はうまくコンセプトを把握することができます。Flexの行と列のヘルプ、レイアウトが意図したとおりに表示されない

私はこれが望むように動作するはずだと思っていました。

最初のフレックス親（メイン）には、3行の子（左/中央/右）があります。子コンテナ（中央）には、3つの列の子（ヘッダ/コンテンツ/フッター）を持つ別のフレックスの親（sub）が含まれている必要があります。コンテンツがオーバーフローすると、ページは下に向かって展開され、コンテンツがない場合はページが高さと幅で埋められます。

ここで私の問題を理解するのを助けるためにペイントした視覚的表現です。

Layout Image

JSFIDDLE Link

（ヘッダ/コンテンツ/フッター）における比率はいけない仕事と.SUBの.contentで100％の高さをしていることは間違った方法でページをオーバーフロー..

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <style> 
     * { 
      margin:0px; 
      border:0px; 
     } 
     .main{ 
      margin-top:-20px; 

      height:100%; 
      display:flex; 
      flex-direction:row; 
     } 

     .main .left{ 
      background:#009246; 
      flex: 1; 
     } 
     .main .center{ 
      background:#F1F2F1; 
      flex: 3; 
     } 
     .main .right{ 
      background:#CE2B37; 
      flex: 1; 
     } 
     .sub{ 
      width:100%; 
      flex-direction:culumn; 
     } 
     .sub .header{ 
      background:blue; 
      flex: 1; 
     } 
     .sub .content{ 
      background:orange; 
      flex: 5; 
     } 
     .sub .footer{ 
      background:blue; 
      flex: 1; 
     } 
    </style> 

</head> 
<body> 
    <div class="main"> 
    <div class="left">left</div> 
    <div class="center">center</div> 
     <div class="sub"> 
      <div class="header">header</div> 
      <div class="content">content</div> 
      <div class="footer">footer</div> 
     </div> 
    <div class="right">right</div> 
    </div> 
</body> 
</html>

出典

2016-04-15 John Doe

のように、あなたはhtml構造に間違いがあります。 CSSの部分については

は、あなたはフレックスコンテナをウロコ状、およびHTMLからの高さを継承してのみ使用することができ、メインコンテナの高さ分： https://jsfiddle.net/qmwymy26/4/

 * { 
 
      margin: 0px; 
 
      border: 0px; 
 
     } 
 
     .main { 
 
      min-height: 100%; 
 
      display: flex; 
 
      flex-direction: row; 
 
     } 
 
     .main .left { 
 
      background: #009246; 
 
      flex: 1; 
 
     } 
 
     .main .center { 
 
      background: #F1F2F1; 
 
      flex: 3; 
 
      display: flex; 
 
      flex-direction: column; 
 
     } 
 
     .main .right { 
 
      background: #CE2B37; 
 
      flex: 1; 
 
     } 
 
     .sub { 
 
      display: flex; 
 
      width: 100%; 
 
      flex-direction: column; 
 
      flex: 1; 
 
     } 
 
     .sub .header { 
 
      background: blue; 
 
      flex: 1; 
 
     } 
 
     .sub .content { 
 
      background: orange; 
 
      flex: 5; 
 
     } 
 
     .sub .footer { 
 
      background: blue; 
 
      flex: 1; 
 
     } 
 
     html, 
 
     body { 
 
      height: 100% 
 
     } 
 
:checked ~ br {display:none;} 
 
label {font-size:2em;}

<div class="main"> 
 
    <div class="left">left</div> 
 
    <div class="center">center 
 
    <div class="sub"> 
 
     <div class="header">header</div> 
 
     <div class="content"> 
 
     <label for="hd">click me to hide br tags </label><input type="checkbox" id="hd" /> 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/> 
 
     </div> 
 
     <div class="footer">footer</div> 
 
    </div> 
 
    </div> 
 
    <div class="right">right</div> 
 
</div>

出典

2016-04-16 01:36:17

マークアップの間違いがあります。

<div class="center">center<!--/div not here--> 
    <div class="sub"> 
     <div class="header">header</div> 
     <div class="content">content</div> 
     <div class="footer">footer</div> 
    </div> 
</div><!-- finish here instead -->

そしてCSSで

あなたも更新 .center

.main .center{ 
    background:#F1F2F1; 
    flex: 3; 
    padding:20px; /* add this */ 
}

にいくつかのパディングを追加.main

.main{ 
     height:100%; 
     display:flex; 
     flex-direction:row; 
     align-items:stretch; //add this... 
}

にalign-items:stretch;を追加する必要がFiddle

出典

2016-04-16 00:05:21 Roy

Flexの行と列のヘルプ、レイアウトが意図したとおりに表示されない

答えて

関連する問題