Wie kann der unerwünschte untere Rand bei verpackten Flex-Artikeln beseitigt werden?

So entfernen Sie den Rand von Flex-Elementen nach dem Umbrechen

In Flexbox kann es vorkommen, dass das letzte Element in einer umgebrochenen Zeile einen unteren Rand behält, was zu einem unerwünschte Lücke. Wenn die Tag-Liste, die Sie mit Flexbox gestalten, dynamisch generiert wird, ist die Ausrichtung auf bestimmte Elemente wie „Element-13“ unpraktisch.

Glücklicherweise bietet Flexbox Optionen, um dieses Problem zu beheben, ohne auf manuelles Targeting zurückgreifen zu müssen:

Update (2021): Moderne Browser unterstützen die Gap-Eigenschaft für Flexbox. Diese Eigenschaft fügt Abstand zwischen flexiblen Elementen hinzu, sowohl horizontal als auch vertikal. Um den unteren Rand zu entfernen, stellen Sie einfach die Lücke auf den gewünschten Wert ein:

.tags {
  gap: 5px;
}

Legacy-Browser (vor 2021):

Verwenden Sie nth-child :

Mit dem nth-child()-Selektor können Sie Elemente basierend auf ihrer Position in einer Liste als Ziel auswählen. Da jedoch die Position des letzten Elements variieren kann, kann diese Methode für dynamische Listen unzuverlässig sein.

Verwendung des letzten N-tel-Typs:

A mehr Ein robuster Ansatz besteht darin, :last-of-type nach dem nth-child()-Selektor zu verwenden. Dadurch wird sichergestellt, dass Sie auf das letzte Element eines bestimmten Typs in seinem Container abzielen:

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

Anzeige ändern:

Alternativ können Sie den Anzeigemodus von ändern Ihre inneren Listenelemente von Flex bis Inline-Flex. Diese Option entfernt alle Ränder und fügt standardmäßig einen Abstand zwischen Elementen hinzu.

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

Das obige ist der detaillierte Inhalt vonWie kann der unerwünschte untere Rand bei verpackten Flex-Artikeln beseitigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!