Как контролировать количество элементов в строке с помощью медиа-запросов в Flexbox?

Итак, представьте, что у меня есть следующая Разметка

<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 для управления макетом и количеством элементов различной ширины. Мне до сих пор повезло, но есть определенный тип макета, который не срабатывает при таком подходе.

ссылка Codepen для демонстрации

Ответы

Ответ 1

Мне пришлось избавиться от поля вокруг блоков, потому что процентные ширины трудно применять к элементам с полями, но вы можете видеть изменения в http://codepen.io/anon/pen/jPeLYb?editors=110:

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
}
.item {
    background-color: tomato;
    box-sizing: border-box;
    padding: 20px;
    outline: 2px solid blue;
    flex: 1;
}

@include max-width(992px) {
    .item {
        flex-basis: 25%;
        background-color: red;
    }
}

@include max-width(640px) {
    .item {
        flex-basis: 50%;
        background-color: green;
    }
}

Важными частями здесь являются:

  • flex-flow: row wrap, который позволяет flexbox появляться на нескольких строках (по умолчанию nowrap)

  • flex-basis, который эквивалентен width в этом случае

  • position: relative, который делает ширину относительно контейнера, а не тела (это приведет к скруглению)