Итак, представьте, что у меня есть следующая Разметка
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
И следующие стили (SASS)
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
display: flex;
@include max-width(992px) {
number: 4; //Hypothetical property that is supposed to control number per row
}
@include max-width(640px) {
number: 2; //Hypothetical property that is supposed to control number per row
}
}
.item {
background-color: tomato;
padding: 20px;
margin-right: 20px;
flex: 1;
}
Существует ли реальная Flexbox CSS-альтернатива моему гипотетическому свойству number
, который может контролировать количество элементов, отображаемых в строке?
Сплав-подобная сетка была удобной, потому что вы могли поместиться без ограничений .items
за один .row
из-за width
. Но с Flexbox мне нужно использовать обходные пути, например, многочисленные классы .row
для управления макетом и количеством элементов различной ширины. Мне до сих пор повезло, но есть определенный тип макета, который не срабатывает при таком подходе.