End of Margin Suffering

Previously, to create space between flex elements, we had to give them margin and then suffer with :last-child to remove extra margin from edges.

The gap Property

Now there's gap. It sets distance only between elements.

.container {
  display: flex;
  gap: 20px; /* 20px between all children, but not at parent edges! */
}

Advantages:

• Clean code.
• No need to zero margins on last element.
• Works for both row and column.