css - 如何使包裹的 flex 元素与上一行的元素保持相同的宽度？

Question

我有一个 <ul>那是一个 flex-box 和一堆 <li>里面有 flex 元素。

我正在尝试获取 <li>具有灵活的宽度，使用最小宽度和最大宽度保持在两个尺寸之间。只要它们在同一条线上，它就可以很好地工作。但是，当它们换行时，<li>新行上的 s 尽可能多地使用空间。这意味着它们在第一行很小，而在只有少数几个时在第二行很大。

有没有办法告诉 flexbox 在包装后保持元素的宽度，同时保持灵活的宽度？

包装演示:

我的代码是这样的:

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

还有 CSS:

ul {
  display: flex;
  flex-wrap: wrap;
}

  li {
    min-width: 40px;
    max-width: 100px;
    flex: 1 0 0;
  }

Here's a live example on codepen with some extra comments ，调整窗口大小以查看它的换行。

Answer 1

长话短说

这不是我称之为解决方案本身的东西，但它是一个相当优雅的解决方法，它只使用媒体查询，更重要的是没有 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)
}

更新:

上面的 mixin 应该可以解决问题，只要您的 flex 容器宽度与视口(viewport)大小匹配，就像 OP 示例中的情况一样。否则媒体查询将无济于事，因为它们总是基于视口(viewport)宽度。但是，您可以使用 css-element-queries库及其元素查询，而不是浏览器媒体查询。这是一个可以应用于 flex 容器的 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)

例子

最后，原始 CodePen 示例的 fork 版本具有所需的输出，使用上面的 mixin:

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