Проблемы плиточки на флексах в CSS
Первая проблема плиточки в общем-то очевидна сразу
- очень не удобно то, что родителю приходится
явно задавать высоту. Ведь у нас вполне может
быть такое, что количество блоков будет меняться
динамически и их количество будет то меньше,
то больше, чем 9.
А вот вторая проблема возникнет, если количество блоков такое, что в последнем ряду будет недостаточное количество блоков. В этом случае последний ряд будет выглядеть отвратительно:
<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>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Получается, что даже по горизонтали значение
space-between работает плохо в нашем
случае.
Резюмируем: если количество ваших потомков
всегда постоянно и нормально помещается в
родителя, то плиточка на space-between
достаточно удобная вещь. В противном случае
придется придумывать что-то еще.
Даны 12 элементов. Сделайте из них
плиточку по 4 элемента в ряд с шириной
каждого элемента в 100px и расстоянием
между ними в 20px.
Даны 12 элементов. Сделайте из них
плиточку по 3 элемента в ряд с шириной
каждого элемента в 150px и расстоянием
между ними в 10px.