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

Flexbox による垂直方向のスペースのバランス

Flexbox は、レイアウト内のコンテンツを整理するための強力なメカニズムを提供します。ただし、複数行のフレックスボックス内の特定の行の垂直方向のスペース消費を制御するのが難しい場合があります。

たとえば、3 番目の行を拡張して残りの行を占めるようにしたいシナリオがあるとします。垂直方向のスペース。フレックスボックスを使用してこれを実現する方法は次のとおりです。

まず、外側のコンテナ (通常は body 要素と html 要素)、および親のフレックスボックス コンテナが存在することを確認します。 (ラッパー) の高さを 100% に設定し、実質的にブラウザ ウィンドウの全高を継承します。

次に、フレックスボックス レイアウト内の 3 行目 (#row3) に注目します。この行に 1 より大きい flex 値を割り当て、他の行には 1 以下の flex 値を残します。これにより、3 行目が他の行よりも多くのスペースを消費する必要があることがブラウザに通知されます。

レイアウトをさらに調整するには、内側の列 (#col1、#col2、および #col2) の min-height プロパティを設定できます。 #col3) 3 行目内の値を 100% にします。これにより、親コンテナ (#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%;
}

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

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

これらの調整を実装することで、を有効にすると、3 行目の高さが動的に調整され、ブラウザ ウィンドウで利用可能な残りの垂直スペースが消費されます。これにより、必要に応じて 3 行目が拡張して隙間を埋め、要素を垂直方向に収容する、目的のレイアウトが提供されます。

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