TL;DR

这不是我称之为solution本身的东西，但它是一个相当优雅的解决方案，只使用媒体查询，更重要的是no JavaScript！

混合(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项目:

.flex-item {
  @include flex-wrap-fix(100px)
}

更新:

只要您的弹性容器宽度与视口大小匹配(就像OP的示例中的情况一样)，上面的混合应该可以起到作用.否则，媒体查询不会对您有所帮助，因为它们始终基于视口宽度.但是，您可以使用css-element-queries库及其元素查询，而不是浏览器媒体查询.以下是可应用于FLEX container的混音:

@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);
    }
  }
}

Explanation:

假设按照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所做的事情.

现在，我们只需将flex-basis指定为100px，将最大浏览器窗口宽度(默认为2000px)指定为optionally，即可创建媒体查询:

@include flex-wrap-fix(100px)

Example

最后，使用上面的混合，使用所需输出的原始CodePen示例的派生版本:

http://codepen.io/anon/pen/aNVzoJ

个