Flex Gap: новое свойство гибкой вёрстки

Flex gap - это свойство CSS, которое позволяет добавить отступ между элементами гибкой раскладки (flexbox).

Ранее для добавления отступов между элементами в гибкой раскладке приходилось использовать псевдоэлементы :before и :after или добавлять отступы через margin. Однако такой подход не всегда был удобным и требовал дополнительных манипуляций со стилями.

Flex gap решает эту проблему, позволяя добавить отступ между элементами гибкой раскладки всего одним свойством. Свойство flex gap устанавливается для контейнера гибкой раскладки (flex container) и задает интервал между флекс-элементами.

Главное преимущество flex gap в том, что оно позволяет легко задавать одинаковый отступ между элементами без необходимости использования дополнительных стилей.

Например, следующий код применяет отступ между элементами гибкой раскладки:

.container {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

В результате, у всех флекс-элементов появится отступ в 20 пикселей.

Важно отметить, что свойство flex gap не поддерживается старыми версиями браузеров, поэтому его использование может требовать альтернативных подходов для старых версий браузеров.

Пример кода:

HTML:

CSS:

.container {

display: flex;

gap: 20px;

}

.box {

width: 100px;

height: 100px;

background-color: red;

}