css – 如何使用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替代我的假设数字属性，可以控制每行显示多少项？

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

Codepen link to demonstrate

解决方法

我必须摆脱块的边缘，因为百分比宽度难以清理地应用于具有边距的元素，但您可以看到 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：允许flexBox在多行上显示的行换行(默认为Nowrap)>在这种情况下相当于宽度的flex-basis位置：相对于容器而言，相对于容器的宽度，而不是身体(这会使四舍五入)

原文地址：https://www.jb51.cc/css/218520.html