複数行のフレックスボックスコンテナの最後の行を左揃えにする方法は?

複数行の Flexbox コンテナの最後の行を左揃えにする方法

Flexbox レイアウトは、コンテンツを行と列に編成するための強力な方法を提供します。ただし、複数行のレイアウトを使用する場合、最後の行を左揃えにすることが課題となる可能性があります。

問題:

グリッドのようなレイアウトを検討してください。フレックスボックスを使用してアイテムを均等に分配したい場合。デフォルトでは、justify-content: space-around プロパティは、他の行より要素が少ない場合、最後の行の項目を中央に配置します。これにより、意図したグリッド効果が損なわれます。

解決策:

最後の行を左揃えにするには、垂直方向に折りたたまれてスペースを占有する「空のスペース」要素を導入できます。でcontainer.

手順:

1. 空のスペース要素を作成する: クラス「filling-empty-」を使用して div 要素を HTML に追加します。 space-childs".
2. 空のスペースのスタイルを設定する要素: 次の CSS ルールを適用します:

<code class="css">.filling-empty-space-childs {
    width: [image width];
    height: 0;
}</code>

3. フレックスボックスのプロパティを設定します: コンテナーに次のプロパティがあることを確認します:

<code class="css">display: flex;
flex-wrap: wrap;
justify-content: space-around;</code>

どうやって作品:

空のスペース要素は、高さがゼロであるため、垂直方向に折りたたまれます。最後の行の要素が他の行よりも少ない場合、これらの空のスペース要素が残りのスペースを占め、最終行の項目が効果的に左揃えになります。

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