折り返し時にフレックスボックスレイアウトの列間のギャップを削除するにはどうすればよいですか?

フレックス項目を折り返すときに複数行間のスペース (ギャップ) を削除する

問題: 列間のギャップ

フレックスボックスを使用してアイテムの列が複数あるコンテナでは、列間に隙間があるという問題が発生する可能性があります。これは、フレックス コンテナの初期設定が align-content:stretch であり、フレックス アイテムの複数行が交差軸に沿って均等に分散されるために発生します。

これらのギャップを解消するには、align-content プロパティを flex- に調整します。 start.

align-content について

単一行のフレックス コンテナ (つまり、flex-wrap:) を使用する場合: nowrap) の場合、交差軸に沿ってスペースを分配するために使用するプロパティは、align-items と align-self です。ただし、質問にあるような複数行のフレックス コンテナー (つまり、flex-wrap: Wrap) では、交差軸に沿ってフレックス ライン (行/列) を分散させるために align-content プロパティを使用する必要があります。

align-content: flex-start を設定する

flex コンテナに align-content: flex-start を適用すると、flex の線が整列します交差軸の始点に合わせて、列間の不要なギャップを排除します。

以上が折り返し時にフレックスボックスレイアウトの列間のギャップを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。