TL;DR
这不是我称之为解决方案本身的东西，但它是一个相当优雅的解决方法，只使用媒体查询，更重要的是没有 JavaScript！ p>
混合（SCSS）：
@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
flex-grow: 1;
flex-basis: $flex-basis;
max-width: 100%;
$multiplier: 1;
$current-width: 0px;
@while $current-width < $max-viewport-width {
$current-width: $current-width + $flex-basis;
$multiplier: $multiplier + 1;
@media(min-width: $flex-basis * $multiplier) {
max-width: percentage(1/$multiplier);
}
}
}
用法：
将 mixin 应用到您的弹性项目：
.flex-item {
@include flex-wrap-fix(100px)
}
更新：
上面的 mixin 应该可以解决问题，只要您的 flex 容器宽度与您的视口大小相匹配，就像 OP 示例中的情况一样。否则媒体查询对您没有帮助，因为它们始终基于视口宽度。但是，您可以使用 css-element-queries 库及其元素查询而不是浏览器媒体查询。这是一个可以应用于 flex container 的 mixin：
@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
display: flex;
flex-wrap: wrap;
> * {
max-width: 100%;
flex-grow: 1;
flex-basis: $flex-basis;
}
$multiplier: 1;
$current-width: 0px;
@while $current-width < $max-expected-width {
$current-width: $current-width + $flex-basis;
$multiplier: $multiplier + 1;
&[min-width~="#{$flex-basis * $multiplier}"] > * {
max-width: percentage(1/$multiplier);
}
}
}
说明：
假设，根据 OP 的示例，我们希望每个项目的最大宽度为 100px，因此我们知道对于 100px 的浏览器宽度，我们可以每行放置一个项目，依此类推：
| Viewport Width | Max Item Count Per Row | Item Width (min-max) |
|----------------|------------------------|----------------------|
| <= 100 | 1 | 0px - 100px |
| <= 200 | 2 | 50px - 100px |
| <= 300 | 3 | 50px - 100px |
| <= 400 | 4 | 50px - 100px |
| <= 500 | 5 | 50px - 100px |
| <= 600 | 6 | 50px - 100px |
我们可以编写媒体查询来创建以下规则：
| Viewport Width | Max Item Count Per Row | Item Max Width | Calculation |
|------------------------------------------------------------------------|
| <= 100px | 1 | 100% | (100/1) |
| <= 200px | 2 | 50% | (100/2) |
| <= 300px | 3 | 33.33333% | (100/3) |
| <= 400px | 4 | 25% | (100/4) |
| <= 500px | 5 | 20% | (100/5) |
| <= 600px | 6 | 16.66666% | (100/6) |
像这样：
li {
flex: 1 0 0
max-width: 100%;
}
@media(min-width: 200px) {
li { max-width: 50%; }
}
@media(min-width: 300px) {
li { max-width: 33.33333%; }
}
@media(min-width: 400px) {
li { max-width: 25%; }
}
@media(min-width: 500px) {
li { max-width: 20%; }
}
@media(min-width: 600px) {
li { max-width: 16.66666%; }
}
当然，这是重复性的，但很可能您正在使用某种预处理器，它可以为您处理重复性。这正是上述 TL;DR 部分中的 mixin 所做的。
我们现在要做的就是指定100px 作为我们的flex-basis，并且可选地指定最大浏览器窗口宽度（默认为2000px）来创建媒体查询：
@include flex-wrap-fix(100px)
示例
最后，使用上述 mixin 的原始 CodePen 示例的分叉版本具有所需的输出：
http://codepen.io/anon/pen/aNVzoJ