フレックスアイテムをラップするときにそれらの間のギャップを削除するにはどうすればよいですか?

折り返すときにフレックス項目間のスペースを削除

垂直方向に十分なスペースがない場合に項目が水平方向に流れる複数行のフレックス レイアウトを実現しようとしています。 。ただし、列間にギャップが発生しています。

フレックス コンテナの初期設定は align-content:stretch です。これにより、フレックス項目が複数行コンテナの交差軸全体に均等に分散されます。この動作を防ぐには、コンテナに align-content: flex-start を適用します。

単一行のフレックス コンテナを操作する場合は、align-items と align-self を使用して、交差軸に沿ってスペースを分配します。ただし、あなたの場合のように複数行のコンテナでは、align-content プロパティを使用して、フレックス ライン (行または列) を交差軸に沿って配置します。

align-content プロパティはさまざまな値を受け入れます。含む:

• フレックススタート
• フレックスエンド
• センター
• スペース間
• スペースアラウンド
• ストレッチ

によってデフォルトの値はストレッチです。これは、残った空き領域がすべての行間で均等に分割され、行が拡張されることを意味します。

解決策

列間のギャップを排除するにはコード例を変更するには、 CSS:

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

結論

align-content: flex-start を使用すると、フレックス ラインがコンテナの上部から開始され、追加のギャップなしで下に続くことが保証されます。 。これは、あなたが求めていた意図したレイアウトと一致します。

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