Using Space Between

In a Flex container, we can use space-between to define the spacing between items. When the number of child items meets our layout expectations, the UI effect looks good. However, if the number of items is too many or too few, the layout will look bad.

Please see the following example:

.wrapper {
  display: flex;
  justify-content: space-between;
}

justify-content: space-between

When there are 4 items, it looks good.

When there are 3 items, the spacing is too large.

For this, we have different solutions:

• Use margin to set the outer margin as a gap
• Use flexbox gap to set the gap
• Use padding on the parent element as the child element gap
• Add blank elements as gaps

For example, we use gap to set the gap

.wrapper {
  display: flex;
  gap: 1rem;
}

gap: 1rem