残りの垂直方向のスペースをフレックスボックス行で埋めるにはどうすればよいですか?

Flexbox レイアウトで 100% の垂直スペース利用率を達成

Flexbox は、開発者が応答性の高い動的なレイアウトを作成できる強力なレイアウト システムです。一般的なシナリオの 1 つは、ブラウザ ウィンドウ内の残りの垂直スペースを自動的に消費するフレックスボックス レイアウト行を作成することです。この記事では、フレックスボックスのプロパティを使用してこれを実現する方法について説明します。

課題:

最初の 2 行の高さが固定された 3 行のフレックスボックス レイアウトを考えてみましょう。課題は、3 行目を垂直方向に拡大してブラウザ ウィンドウの残りのスペースを埋め、それに応じてコンテンツを拡張できるようにすることです。

解決策:

鍵この動作を実現するには、3 行目の "flex" プロパティを 1 より大きい値に設定します。これは、フレックスボックスに、本来のサイズを超えて行を拡大し、残りのスペースを複数の行に分散するように指示します。その子供たち。ただし、行内のコンテンツがブラウザ ウィンドウ全体に自然に収まらないため、高さ属性を 100% に設定しても機能しません。

解決策の実装:

このレイアウトを適切に実装するには、次の原則が適用されていることを確認してください:

• HTML の高さを設定します。 body、および親 div (ラッパー) を 100% にします。この継承により、3 行目がブラウザ ウィンドウの全高を継承できるようになります。
• 3 行目の flex プロパティを 1 より大きい値に設定します (例: flex: 2)。これにより、行が強制的に垂直方向に拡張され、残りのスペースが利用されます。
• 3 行目の列に最小高さ 100% を追加することを検討してください。最近のほとんどのブラウザでは必要ありませんが、ブラウザ間の互換性を提供できます。

コード例:

.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%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

結論:

これらのガイドラインに従うことで、残りの垂直方向のレイアウトを自動的に消費するフレックスボックス レイアウトを簡単に作成できます。ブラウザウィンドウ内のスペース。このテクニックは、コンテンツの高さが大きく異なる可能性があるレスポンシブ デザインに特に役立ちます。

以上が残りの垂直方向のスペースをフレックスボックス行で埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。