ラップされたフレックスアイテムの不要な下マージンを削除するにはどうすればよいですか?

折り返し後にフレックス項目からマージンを削除する方法

フレックスボックスでは、折り返された行の最後の項目が下マージンを保持する状況が発生し、望ましくないギャップ。 Flexbox でスタイルを設定するタグ リストが動的に生成される場合、「item-13」などの特定の項目をターゲットにすることは現実的ではありません。

幸いなことに、Flexbox には手動のターゲットに頼らずにこの問題に対処するオプションが用意されています。

更新 (2021): 最新のブラウザは、Flexbox のギャップ プロパティをサポートしています。このプロパティは、水平方向と垂直方向の両方で、フレックス項目間にスペースを追加します。下のマージンを削除するには、単にギャップを希望の値に設定します:

.tags {
  gap: 5px;
}

レガシー ブラウザ (2021 年より前):

nth-child の使用:

nth-child() セレクターを使用すると、要素に基づいてターゲットを指定できますリスト内での位置について。ただし、最後の項目の位置は変化する可能性があるため、このメソッドは動的リストでは信頼できない可能性があります。

最後の nth-of-type の使用:

A more堅牢なアプローチは、nth-child() セレクターの後に :last-of-type を使用することです。これにより、コンテナ内の特定のタイプの最後の要素を確実にターゲットにすることができます:

li:nth-child(n+0):last-of-type {
  margin-bottom: 0;
}

表示の変更:

または、次のような表示モードを変更できます。内部リスト要素を flex から inline-flex に変更します。このオプションは、デフォルトですべての余白を削除し、項目間にスペースを追加します。

.tag {
  display: inline-flex;
  margin: 0 5px 5px; /* Unnecessary now */
}

以上がラップされたフレックスアイテムの不要な下マージンを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。