行の高さ拡張の制御フレックスボックス

フレックスボックスについては非常に混乱しています。ここで私が持っているレイアウトは今です：行の高さ拡張の制御フレックスボックス

とコード：

<html> 
<head> 
    <style> 
     /* flex boxes */ 
     .interblock{background:gray;height:100%;display:flex;flex-flow:row wrap;} 
     .subrect{flex:1 90%;} 
     .labelrect{flex:0 1 10%;} 
     .footrect{flex:1 100%;background:yellow;height:auto;} 
     .topleft{flex:0 1 50%;height:auto;background:green;} 
     .topright{flex:0 1 50%;height:auto;background:red;} 
    </style> 
</head> 

<body> 
    <div class='interblock'> 
     <div class='topleft'> 
      topleft 
     </div>  
     <div class='topright'> 
      topright 
     </div> 
     <div class='labelrect' style='background:coral'>labelrect</div> 
     <div class='subrect' style="background:orange">subrect</div>  
     <div class='labelrect' style='background:cyan'>labelrect</div> 
     <div class='subrect' style="background:blue">subrect</div>  
     <div class='footrect'> 
      footer 
     </div> 
    </div> 
</body> 
</html>

このレイアウトはほとんど正しいです。問題は、ヘッダーとフッターで使用されていない高さの100％を使用するように、サブクラス/ラベルの中央揃えブロックを必要としていることです。任意の数の副題/ラベル訂正があり、それらはすべて同じ高さでなければならない。ヘッダーとフッターの内容を考慮した拡大高さを指定する方法がわかりません。 labelrect/subrectブロックを高さ100％のヘッダーフッターにするにはどうすればよいですか？

出典

2016-10-17 AustinC

マークアップの一部を変更する必要があります。ここでは、2つのラッパーを作成しました.1つはtop、1つはmiddleです。

topとfootrectflex: 0は、それらのスペースの残りの部分を埋めるためにflex: 1を有するコンテンツとmiddleによってサイズ作る与えます。

/* flex boxes */ 
 

 
html, 
 
body { 
 
    margin: 0; 
 
} 
 
.interblock { 
 
    background: gray; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top, 
 
.footrect { 
 
    flex: 0; 
 
} 
 
.top { 
 
    flex-basis: auto; 
 
    display: flex; 
 
} 
 
.middle { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.subrect { 
 
    flex: 1 90%; 
 
} 
 
.labelrect { 
 
    flex: 0 1 10%; 
 
} 
 
.footrect { 
 
    background: yellow; 
 
} 
 
.topleft { 
 
    flex: 1; 
 
    background: green; 
 
} 
 
.topright { 
 
    flex: 1; 
 
    background: red; 
 
}

<div class='interblock'> 
 
    <div class='top'> 
 
    <div class='topleft'> 
 
     topleft<br><br> 
 
    </div> 
 
    <div class='topright'> 
 
     topright 
 
    </div> 
 
    </div> 
 
    <div class='middle'> 
 
    <div class='labelrect' style='background:coral'>labelrect</div> 
 
    <div class='subrect' style="background:orange">subrect</div> 
 
    <div class='labelrect' style='background:cyan'>labelrect</div> 
 
    <div class='subrect' style="background:blue">subrect</div> 
 
    </div> 
 
    <div class='footrect'> 
 
    footer<br><br> 
 
    </div> 
 
</div>

出典

2016-10-17 16:51:14 LGSon

行の高さ拡張の制御フレックスボックス

答えて

関連する問題