如何使用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 这使宽度相对于容器而不是主体(这会搞砸圆角)