Свойство 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>

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

Свойство text-stroke

Одновременно устанавливает цвет и толщину контура вокруг букв и символов текста.

Свойство animation-direction

Устанавливает направление движения анимации.

Стиль первого элемента

Псевдокласс задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).&...

Свойство empty-cells

Указывает, как должна оторажаться граница или фон в ячейке, если она пустая.<br><br>Я...

Свойство border-top-style

Устанавливает стиль верхней границы элемента.