如何使用Flexbox中的媒体查询控制每行的项数？ [英] How to control number of items per row using media queries in 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>

以下样式

@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替代我的假设

Is there a real Flexbox CSS alternative to my hypothetical number property that can control how many items to show per row ?

可以控制每行显示多少个项目的 c 由于 width ，$ c> .items 每个 .row 但是使用flexbox我必须使用诸如 .row 类的解决方法来控制不同宽度的项目的布局和数量。我已经幸运了，到目前为止，但有一定类型的布局，将失败与这样的方法。

The float-like grid was handy because you could fit unlimited .items per one .row because of the width. But with flexbox I have to use workarounds like numerous .row classes to control the layout and number of items at different width. I've been lucky so far, but there are certain type of layout which will fail with such an approach.

Codepen链接以演示

推荐答案

的边框，因为百分比宽度很难干净地应用于元素的边距，但你可以看到 http://codepen.io/anon/pen/jPeLYb?editors=110 ：

I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at 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-flow: row wrap which allows the flexbox to appear on multiple rows (the default is nowrap)

>

flex-basis which is the equivalent of width in this case

这篇关于如何使用Flexbox中的媒体查询控制每行的项数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！