CSS 如何使用 Flexbox 中的媒体查询控制每行的项目数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31621257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control number of items per row using media queries in Flexbox?
提问by knitevision
So imagine I have the following Markup
所以想象我有以下标记
<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>
And the following styles(SASS)
以及以下样式（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;
}
Is there a real Flexbox CSS alternative to my hypothetical numberproperty that can control how many items to show per row ?
是否有一个真正的 Flexbox CSS 替代我的假设number属性可以控制每行显示多少项目？
The float-like grid was handy because you could fit unlimited .itemsper one .rowbecause of the width. But with flexbox I have to use workarounds like numerous .rowclasses 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.
浮动式格栅是方便，因为你可以无限适合.items每一个.row因width。但是对于 flexbox，我必须使用像许多.row类这样的变通方法来控制不同宽度的项目的布局和数量。到目前为止，我一直很幸运，但是某些类型的布局会因这种方法而失败。
回答by Gareth
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:
我不得不去掉块周围的边距，因为百分比宽度很难干净地应用于具有边距的元素，但您可以在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;
}
}
The important parts here are:
这里的重要部分是：
flex-flow: row wrapwhich allows the flexbox to appear on multiple rows (the default isnowrap)flex-basiswhich is the equivalent ofwidthin this caseposition: relativewhich makes the widths relative to the container, rather than the body (this would screw up the rounding)
flex-flow: row wrap它允许 flexbox 出现在多行上（默认为nowrap）flex-basis这相当于width在这种情况下position: relative这使得宽度相对于容器，而不是身体（这会搞砸舍入）
