Flexbox レイアウトで 100% の垂直スペース利用率を達成
Flexbox は、開発者が応答性の高い動的なレイアウトを作成できる強力なレイアウト システムです。一般的なシナリオの 1 つは、ブラウザ ウィンドウ内の残りの垂直スペースを自動的に消費するフレックスボックス レイアウト行を作成することです。この記事では、フレックスボックスのプロパティを使用してこれを実現する方法について説明します。
課題:
最初の 2 行の高さが固定された 3 行のフレックスボックス レイアウトを考えてみましょう。課題は、3 行目を垂直方向に拡大してブラウザ ウィンドウの残りのスペースを埋め、それに応じてコンテンツを拡張できるようにすることです。
解決策:
鍵この動作を実現するには、3 行目の "flex" プロパティを 1 より大きい値に設定します。これは、フレックスボックスに、本来のサイズを超えて行を拡大し、残りのスペースを複数の行に分散するように指示します。その子供たち。ただし、行内のコンテンツがブラウザ ウィンドウ全体に自然に収まらないため、高さ属性を 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 サイトの他の関連記事を参照してください。