Как контролировать количество элементов в строке, используя медиа-запросы во Flexbox?

Question

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

<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 для демонстрации

Answer 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 который делает ширину относительно контейнера, а не тела (это могло бы испортить округление)

Answer 2

Я нашел лучшее решение для ограничения количества столбцов в строке на разных устройствах без использования медиа-запросов:

HTML:

<div class="flex-container">
    <div class="item">
        <h3>ONE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>TWO</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>THREE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>FOUR</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
</div>

CSS:

.flex-container {
        display: flex;
        flex-wrap: wrap;
}
.item {
        box-sizing: border-box;
        flex: 1 0 250px;
        margin: 1rem;
        padding: 1rem;
        border: 1px solid #000;
        border-radius: 5px;
}

Ссылка Codepen: https://codepen.io/bala285/pen/YzqpLod

Источник: https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/