How to Eliminate Unwanted Bottom Margin on Wrapped Flex Items?

How to Remove Margin from Flex Items after Wrapping

In flexbox, you can encounter a situation where the last item in a wrapped line retains a bottom margin, causing an unwanted gap. When the tag list you style with flexbox is generated dynamically, targeting specific items like "item-13" is impractical.

Fortunately, Flexbox offers options to address this issue without resorting to manual targeting:

Update (2021): Modern browsers support the gap property for Flexbox. This property adds spacing between flex items, both horizontally and vertically. To remove the bottom margin, simply set gap to your desired value:

.tags {
  gap: 5px;
}

Legacy Browsers (pre-2021):

Using nth-child:

The nth-child() selector allows you to target elements based on their position in a list. However, since the position of the last item may vary, this method can be unreliable for dynamic lists.

Using the last nth-of-type:

A more robust approach is to use :last-of-type after the nth-child() selector. This ensures you're targeting the last element of a specific type within its container:

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

Modifying Display:

Alternatively, you can change the display mode of your inner list elements from flex to inline-flex. This option removes all margins and adds spacing between items by default.

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

The above is the detailed content of How to Eliminate Unwanted Bottom Margin on Wrapped Flex Items?. For more information, please follow other related articles on the PHP Chinese website!