В 2021 году, новинкой в CSS стало свойство gap для flexbox.

Grid gap

Это свойство позаимствовано от Grid CSS и называется grid-gap. Используется оно для создания пространства между ячейками. Рассмотрим как это свойство работает в grid:

Начни Учить Full-Stack JavaScript СЕЙЧАС!

grid-gap

В результате получаем такую сетку:

grid-gap

Между колонками будет расстояние 20px, между строками - 40px.

Flexbox без gap

Для flex-box это свойство нужно было уже очень давно, так как оно отбрасывает необходимость использовать отрицательный margin. Для добавления пространства между элементами нужно каждому из них добавить свойство margin:

grid-gap

Но с таким подходом появляется нежелательный эффект - между элементами и краями контейнера тоже появляется пустое пространство. Это очень не удобно, если при верстке все элементы должны располагаться от края до края. И для того, что бы убрать нежелательно дополнительное пространство, нужно добавить контейнеру отрицательный margin:

grid-gap

Flex-gap спешит на помощь

С новыми свойствами row-gap и column-gap все будет намного проще. Достаточно будет в стилях контейнера указать из значения, что бы раздвинуть flex-элементы:

grid-gap

Так же, как и с grid, запись немного можно сократить, использовав свойство gap: gap: 40px 20px;. Больше никаких отрицательных margin и нежелательных полей.

В чем подвох?

Использование этого свойства для flex-контейнеров пока ограничено. На момент написания статьи на сайте это свойство поддерживает только 68% процентов браузеров. Это довольно мало для повсеместного использования flexbox gap, но надеемся ситуация скоро улучшится.