複数行のフレックスボックスレイアウトで最後の行を左揃えにする方法は?

複数行フレックスボックスの最後の行を左揃えにする

フレックスボックス レイアウトで、最後の行を左側に揃えると、次のような場合に問題が発生する可能性があります。最後の行には、他の行と同じ数の要素が含まれていません。この不規則性により、望ましいグリッド効果が妨げられます。

この問題を解決するには、「filling-empty-space-childs」div を使用する手法を使用できます。これらの div は高さがゼロなので、レイアウトに影響を与えることなく新しい行に折りたたむことができます。

次の HTML コードを考えてみましょう:

<code class="html"><div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

    <div class="filling-empty-space-childs"></div>
    <div class="filling-empty-space-childs"></div>
    <div class="filling-empty-space-childs"></div>

</div></code>

および対応する CSS:

<code class="css">.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

.filling-empty-space-childs {
    width: 130px; /*match the width of the items*/
    height: 0;
}</code>

このソリューションでは、「filling-empty-space-childs」div が最後の行の残りのスペースを占めます。最後の行に 4 つの要素がある場合、これらの div は新しい行に折りたたまれ、非表示になり、スペースを占有しません。ただし、要素が 4 つ未満の場合は、追加の「filling-empty-space-childs」 div によって最後の要素が左側に配置され、グリッド効果が維持されます。

以上が複数行のフレックスボックスレイアウトで最後の行を左揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。