Плиточка на флексах в CSS
Давайте сейчас научимся делать плиточку на флексбоксах. Для начала расположим флекс-блоки в несколько рядов, по три блок в ряд.
Для этого родителю флексов установим ширину
в 300px и flex-wrap в значении
wrap, а потомкам ширину в 100px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Давайте теперь сделаем расстояние между нашими блоками по горизонтали. Для этого увеличим ширину родителя, чтобы дать дополнительное место для отступов.
Так как у нас три блока в ряд, получается
что между ними по два промежутка. Пусть мы
хотим, чтобы каждый промежуток имел ширину
10px. Получится, что ширину родителя
нужно увеличить на 20px, то есть сделать
не 300px, а 320px.
Давайте теперь родителю блоков зададим justify-content
в значение space-between и получим
желаемое расстояние между блоками:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Давайте теперь добавим такое же расстояние
между блоками и по вертикали. Для этого можно
задать свойство align-content в значении
space-between.
Для этого, однако, нужно задать высоту родителю,
иначе align-content не будет работать.
Давайте установим высоту в 320px.
В этом случае у нас как раз поместятся три
ряда блоков по 100px высотой плюс
два отступа между рядами в 10px.
Давайте запустим:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
width: 320px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Все работает замечательно, но есть некоторые проблемы, которые мы рассмотрим в следующем уроке.