我有一个< ul>这是一个flex-Box和其中的一堆< li>它们是flex-items。
我试图获得< li>具有灵活的宽度，使用最小宽度和最大宽度保持在两个尺寸之间。只要他们在同一条线上，它的工作很棒。但是，当它们包装时，< li>在新线上使用尽可能多的空间。这意味着他们在第一线很小，而在第二线，当只有其中一些时，他们是大的。
有没有办法告诉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，调整你的窗口大小看看它包装。
解决方法
TL; DR
这不是我所称的解决方案本身，但它是一个相当优雅的解决方法，只使用媒体查询，更重要的是没有JavaScript！
Mixin(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);
}
}
}
用法：
@include flex-wrap-fix(100px)
说明：
比方说，按照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 | 5 | 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中的mixin; DR部分。
我们现在要做的就是将100px作为我们的flex基础，并且可以选择最大的浏览器窗口宽度(默认为2000px)来创建媒体查询：
@include flex-wrap-fix(100px)
例
最后，一个分叉版本的原始CodePen示例具有所需的输出，使用上面的mixin：
