フレックス項目をラップするときに不必要なマージンを削除するにはどうすればよいですか?

ラップ時にフレックス項目からマージンを削除

Flexbox は、複雑なレイアウトを簡単に作成できる強力なレイアウト システムです。フレックスボックスを使用するときに発生する可能性のある一般的な問題の 1 つは、フレックス項目を折り返すときに、それらの間に不必要なマージンが追加されることです。デフォルトでは、フレックスボックスは各行の最後の項目にマージンを追加するため、望ましくないスペースが生じる可能性があります。

質問:

HTML および CSS 内提供されているスニペットでは、スタイルには 0 5px 5px のマージンを持つ .tag クラスが含まれており、これにより各行の最後の項目にマージンが追加されます。ただし、タグ リストは動的であるため、特定の最後の項目 (「.item-13」など) を直接ターゲットにしてこのマージンを削除することはできません。

回答:

フレックス項目をラップするときに不必要なマージンを削除するには、いくつかの方法があります。

1.ギャップ プロパティの使用:

CSS のギャップ プロパティは、フレックス項目間に水平方向 (行間) と垂直方向 (列間) の両方にギャップを作成します。 .tags のギャップ プロパティを設定すると、各行の最後の項目を含むすべてのフレックス項目からマージンを削除できます。

更新された CSS:

.tags {
    gap: 5px;
}

2. Flexbox の justify-content プロパティの使用:

もう 1 つの解決策は、justify-content プロパティを使用して、コンテナ内のフレックス項目の配置を制御することです。 justify-content: space-between を設定すると、コンテナ内でアイテムを均等に配置し、最後のアイテムの余白をなくすことができます。

更新された CSS:

.tags {
    justify-content: space-between;
}

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