Свойство gap

Описание

Устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap.

Синтаксис

gap: размер | проценты;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
gap: 20px 5px;
}
#flexbox > div {
border: 1px solid rgb(187, 187, 187);
background-color: rgb(242, 255, 0);
flex: 1 1 auto;
width: 100px;
height: 50px;
}
</style>
<div id='flexbox'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

Читайте также

initial

Значение применяется для установки исходного значения свойства. Может пригодиться в нескольких сл...

Свойство border-right

Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.<br><br&...

Правило @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства...

unset

Является комбинацией ключевых слов <span class='samp'>initial и inherit</...

Свойство flex-shrink

Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшать...