Css gap в flexbox

CSS Flexbox и CSS Grid - это инструменты для управления компоновкой блоков на сайте. Flexbox отлично справляется с одномерными макетами, а CSS Grid - с двумерными, с колонками и строками. Часто нам требуется добавить пространство между элементами макета. В этой статье будет показано, как добавить пространство между элементами flex с помощью свойства CSS gap.

Inline Flex

Для демонстрации CSS Gap мы будем использовать Flexbox. CSS Gap работает в CSS Grid, но есть много случаев, когда нам нужны инлайн-списки, которым нужно место без определенной сетки.

<div class="flex-gap">
<div>1</div>
<div>2<div>
<div>3<div>
<div>4<div>
<div>5<div>
<div>6<div>
<div>

Мы используем inline-flex, чтобы отображать родительский элемент как inline элемент (display:inline-block), а не как блочный. Cо свойством flex-wrap: wrap; мы выведем элементы в строку.

Если мы хотим добавить отступы у элементов, то нам нужно добавить свойство gap.

.flex-gap {
  width: 600px;
  display: inline-flex;
  flex-wrap: wrap;
  background: #545252;
  gap: 24px;
}
.flex-gap div {
  width: 80px;
  height: 80px;
  background: #4aa324;
  text-align: center;
  line-height: 80px;
}