如何使用Flexbox中的媒体查询控制每行的项数？

问题描述

因此，假设我有以下标记：

 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.
  
推荐答案
的边框，因为百分比宽度很难干净地应用于元素的边距，但你可以看到：
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中的媒体查询控制每行的项数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！