フレックスボックスのレイアウトに100％の垂直方向のスペースを確保するにはどうすればよいですか？

102

フレックスボックスのレイアウト行がブラウザウィンドウの残りの垂直方向のスペースを消費することをどのように確認できますか

3列のフレックスボックスレイアウトがあります。最初の2行は固定の高さですが、3行目は動的であり、ブラウザーの高さいっぱいまで拡大したいと思います。

ここに画像の説明を入力してください

列3を作成する行3に別のフレックスボックスがあります。これらの列内の要素を適切に調整するには、背景色やベースでのアイテムの配置などについて、ブラウザーの高さ全体を理解する必要があります。主要なレイアウトは、最終的には次のようになります。

ここに画像の説明を入力してください

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

スニペットを展開

height属性を追加しようとしましたが、これをハード番号に設定すると機能し100%ますが、に設定すると機能しません。height: 100%コンテンツがブラウザーウィンドウいっぱいに表示されないため、機能しないことを理解しましたが、フレックスボックスレイアウトを使用してアイデアを再現できますか？

html css flexbox

— 邪悪なクローゼットモンキー
ソース

ビジュアルに賛成票を投じ、どうやってemを作りましたか？

— ジョナサン

OmniGraffle、および修正のためのPixelmator。

— イービルクローゼットモンキー

回答:

115

あなたは、設定すべきであるheightのhtml, body, .wrapperに対して100%（継承フルハイトのために）、その後、ちょうど設定flexよりも値の大きいの1に.row3他の人に及びません。

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

スニペットを展開

デモ

— G-キリルス
ソース

これを行う方法はありますが、コンテンツdivを展開してコンテンツを埋める方法はありますか？ここであなたの例を分岐しました。

— iameli

@iameli、代わりにクロムにmin-heightを使用してください。heightfiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddleが壊れています

— Joel Peltonen

これが実際のコードペンデモです：codepen.io/mprinc/pen/JjGQvaeと同様の質問の説明：stackoverflow.com/a/63174085/257561

— mPrinC

フィドルが消えてはならないコードペンに置き換えられました。これはスニペットのコピーです。注最小高さは、今日のクロームバージョンではもはや必要ないこと。

— G-Cyrillus

ラッパーを高さ100％に設定します

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

3行目をflex-growに設定します

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

デモ

— ヴァルス
ソース

私の場合、html、body、.wrapper {height：100％; } 取り組んでいます。ラッパーが機能するだけではありません。

— gnganpath 2015

100％機能する別の方法を紹介します。また、例のパディングも追加します。

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

ご覧のとおり、flex-grow＆flex-direction属性を利用しながら、制御用のいくつかのラッパーでこれを実現できます。

1：親の「フレックス方向」が「行」の場合、その子の「フレックス成長」は水平方向に機能します。2：親の「フレックス方向」が「列」の場合、その子の「フレックスグロー」は垂直方向に機能します。

お役に立てれば

ダニエル

— ガッドマスター
ソース

divやりすぎ。

— John

次のいずれかを削除できますflex-pad-y:)

— Eoin

いいね！これは、「ヘッダー」と「フッター」の間にある「コンテンツ」<div>を画面の高さ全体に埋め込んだ唯一の例です。他のすべての例は、 "height：100％"属性を無視しているようです。

— Mike Gledhill

それはクールなソリューションです。ジョンが上記のDIVのやり過ぎを言っていることは知っていますが、同意しません。水平方向と垂直方向の両方でフレックスグローを利用するには、4つのdivが必要です（垂直方向が重要です）。お役に立てて嬉しいです！4つのDIVを使用すると、柔軟性が大幅に向上します。DIVを削除しようとすると、その柔軟性は衰え始めます。

— GaddMaster