ラップ後にフレックスボックス列間のギャップを削除するにはどうすればよいですか?

ラップ後にフレックス項目の列間のスペースを削除する

フレックスボックスを使用して、設定された高さのコンテナ内に項目の列を作成する場合、次のことができます。列が新しい行に折り返されると、列間に不要な隙間が発生します。この問題は、align-content:stretch のデフォルト設定が原因で発生します。

Align-content は、交差軸に沿ったフレックス項目の複数行の分布を決定します。ストレッチするように設定すると、フレックス ラインが利用可能なスペースに沿って均等に分布します。この動作をオーバーライドしてギャップを削除するには、align-content: flex-start をコンテナに適用します。

単一行のフレックス コンテナとは対照的に、複数行のフレックス コンテナ (flex-wrap: Wrap) align-content プロパティを利用してフレックス ラインを配布します。フレックスボックスの仕様によれば、align-content には次の 6 つの値があります:

• flex-start
• flex-end
• center
• space -間
• 空間-周囲
• ストレッチ(デフォルト)

ストレッチにより、フレックス ラインを拡張して残りのスペースを埋めることができます。負の空き領域がある場合、ストレッチは flex-start のように動作しますが、それ以外の場合はすべて、行間でスペースを均等に分割します。

align-content: flex-start を設定すると、flex 行が整列します。交差軸の先頭まで移動し、列間のギャップを効果的に除去します。これにより、アイテムが互いの下に整然と並べられ、利用可能なスペースを埋めるという望ましい結果が得られます。

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