折り返すときにフレックス項目から下マージンを削除するにはどうすればよいですか?

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

フレックスボックスを使用する場合、特に作成時に、行の最後の項目から下のマージンを削除する必要があることがよくあります。特定の項目をターゲットにすることが不可能な動的リスト。これにより、異なる行の項目間の間隔が不均等になる可能性があります。

この文脈において、フレックスボックスには、行内の項目の位置に基づいて CSS スタイルを変更する固有の機能が提供されません。ただし、目的の効果を実現する別のアプローチもあります。

gap プロパティの使用

CSS では、flex 項目間にスペースを追加するために使用できるギャップ プロパティが導入されました。適切な値に設定すると、各行の最後の項目からマージンを効果的に削除できます。ただし、このプロパティは古いブラウザではサポートされていません。

.tags {
  gap: 5px;
}

マージンの調整

もう 1 つの方法は、li 要素の下マージンを変更することですが、これは li 要素が最後の項目である場合に限ります。一行。このために、JavaScript を利用して、コンテナ内の要素の位置に基づいてスタイルを動的に調整できます。

const tags = document.querySelectorAll('.tags li');
tags.forEach((tag, index) => {
  if (index % 4 === 3) {
    tag.style.marginBottom = 0;
  }
});

疑似要素の使用

疑似要素を使用して、各行の最後の項目の前後に非表示の要素を追加し、負のマージンを設定して li 要素のマージンを打ち消すなどのスタイルを適用します。

.tags li:last-of-type::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: -5px;
}

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