複数行のフレックスボックスレイアウトの最後の行を左に揃えるにはどうすればよいですか?

複数行のフレックスボックス レイアウトの最後の行を揃える

フレックスボックスを使用して要素がグリッド パターンに配置されたコンテナを作成する場合、要素の最後の行が他の行と適切に整列しないという問題がよく発生します。これは、行の要素数が他の行と同じでない場合、フレックスボックスはデフォルトで要素を中央に配置するためです。

この問題を解決して最後の行を左側に揃えるには、次の手順を実行できます。 :

1. 空のスペースを埋める Div の作成: HTML 構造に、クラス「filling-empty-space-childs」を持つ 3 つの div 要素を追加します。これらの div の幅をグリッド内の要素の幅と一致するように設定し、高さ 0 を割り当てます。この高さにより、新しい行に入るときに div が「折りたたまれ」、追加のスペースが確実に埋められるようになります。

2. CSS スタイル: 次のプロパティを持つ CSS を使用してフレックスボックス要素を配置します:

   • 表示: Flex: コンテナを次のように設定します。フレックスボックスとして表示します。
   • Flex-Wrap: Wrap: 必要に応じて、要素が新しい行に折り返されるようにします。
   • Justify-Content: Space-Around: グリッド セル内に要素を均等に配置します。

これらの手順を実装すると、要素の最後の行は、要素が含まれている場合でも常に左側に揃えられます。他の行とは要素の数が異なります。これにより、一貫性があり、整理されたグリッド レイアウトが確保されます。

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