フレックス項目が折り返されるときに、最後の行から不要なマージンを削除するにはどうすればよいですか?

フレックス項目をラップするときにマージンを削除する

フレックスボックス レイアウトを使用する場合、最後の行がコンテナ内の flex アイテムには、最後のアイテムが CSS クラスから継承しているため、不要な下マージンが生じます。タグ リストが動的である場合、これは困難になり、インデックスに基づいて特定のアイテム (つまり、アイテム-13、アイテム-14 など) をターゲットにするのは現実的ではありません。

解決策

Flexbox には、項目の最後の行からマージンを削除する直接的な方法はありません。ただし、別のアプローチがいくつかあります。

1. Gap プロパティの使用

最新のブラウザでは、CSS のギャップ プロパティを使用してフレックス項目間にスペースを作成できます。ギャップ値を設定すると、すべてのフレックス項目の間にスペースが自動的に追加され、マージンが不要になります。

.container {
  ...
  gap: 5px;                          /* added */
}

2.行ベースの選択

タグ リストが高さが既知の別のコンテナの子である場合、CSS nth-child() セレクターを使用して最後の行から下マージンを選択的に削除できます。

.container .tags li:nth-child(12n) {
  margin-bottom: 0;
}

3.計算された幅の子

場合によっては、各子の幅を計算してフレックス コンテナに追加できる場合があります。これにより、コンテナが子を均等にラップするようになり、明示的なマージンが不要になります。

.container {
  ...
  display: flex;
  flex-wrap: wrap;
  width: 100%;  /* width based on child count and their individual widths */
}

.tag {
  width: 20%;
}

注: ギャップ プロパティは、Chrome、Firefox、およびその他の最新のブラウザでサポートされています。サファリ。サポートされていないブラウザでは 0 に戻ります。

以上がフレックス項目が折り返されるときに、最後の行から不要なマージンを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。