所以想象我有以下标记
和以下样式(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类之类的解决方法来控制不同宽度的项目的布局和数量。到目前为止,我一直很幸运,但是有一些类型的布局将会失败。