flex 固定每行数量_css – 如何使用Flexbox中的媒体查询来控制每行的数量？

所以想象我有以下标记

和以下样式(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替代我的假设数字属性，可以控制每行显示多少项？

漂浮的网格是方便的，因为你可以适应无限的.items每一个.row因为宽度。但是使用flexbox我必须使用诸如许多.row类之类的解决方法来控制不同宽度的项目的布局和数量。到目前为止，我一直很幸运，但是有一些类型的布局将会失败。