如何使用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链接演示

@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; } }