列内でラップされたフレックス項目間のギャップを解消するにはどうすればよいですか?

フレックス アイテムをラップするときに複数行間のスペース (ギャップ) を削除します

コンテナの高さと方向が設定されたフレックスボックスを使用する場合列を折り返すと、アイテムの行間にギャップが発生する可能性があります。この問題は、デフォルトの align-content プロパティがストレッチに設定されているために発生します。これにより、利用可能なスペース内で行が均等に分散されます。

これらのギャップを削除するには、align-content プロパティを調整します。

css
.container {
align-content: flex-start;
}

これにより配置が設定されます

フレックス ラインの配置について

配置の違いに注意することが重要です。 -アイテムとalign-content:

• align-items: 交差軸上の 1 つのフレックス ライン (行または列) 内に項目を配置します。
• align -content: コンテナ内の複数のフレックス ラインを十字に配置します。 axis.

複数行のフレックス コンテナーの場合、align-content は行または列間のスペースを分散する役割を果たします。 align-content を flex-start に設定すると、フレックス ラインが隙間なくコンテナの先頭に配置されます。

追加のヒント

他のフレックスボックス プロパティを追加することを検討してください。レイアウトを微調整します:

• justify-content:主軸上の各フレックス ライン内の項目を整列します。
• align-items: 各フレックス ライン内の垂直方向の位置合わせを設定します。
• flex-direction: レイアウトの方向を指定します (行または
• flex-wrap: 項目を複数行に折り返すかどうかを決定します。

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