如何保持包装的flex项目与上一行的元素相同的宽度？ [英] How to keep wrapped flex-items the same width as the elements on the previous row?
问题描述
我有一个< ul> 这是一个弹性框和一堆< li>
我想让< li> 灵活的宽度，使用min-width和max-width保持在两个尺寸之间。它工作伟大，只要他们在同一条线上。然而，当它们换行时，新行上的< li> 使用尽可能多的空间。这意味着他们在第一行上很小，而在第二行上只有少数几个。
有没有办法告诉flexbox保持
p>
我的代码像这样：
< 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 b $ b max-width：100px
flex：1 0 0
a href =http://codepen.io/midu/pen/gahFu =nofollow noreferrer>这是一个关于codepen的实例，并附加一些注释 ，调整窗口大小以查看它换行。
TL; DR
'd调用解决方案本身，但它是一个相当优雅的解决方法，只使用媒体查询，更重要的是没有JavaScript ！
Mixin（SCSS）：
@mixin flex-wrap-fix 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 ，我们可以为每个行等：
|视口宽度|每行最大项计数|项目宽度（最小 - 最大）|
| ---------------- | ------------------------ | --- ------------------- |
| < = 100 | 1 | 0px - 100px |
| < = 200 | 2 | 50px - 100px |
| < = 300 | 3 | 50px - 100px |
| < = 400 | 4 | 50px - 100px |
| < = 500 | 5 | 50px - 100px |
| < = 600 | 6 | 50px - 100px |
我们可以写媒体查询来创建以下规则：
|视口宽度|每行最大项计数|项目最大宽度|计算|
| --------------------------------------------- --------------------------- |
| < = 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; DR 部分中的mixin。
现在我们要做的是指定 100px 作为我们的 flex-basis 和可选最大浏览器窗口宽度（默认为 2000px ）创建媒体查询：
@include flex-wrap-fix ）
示例
版本的原始CodePen示例与所需的输出，使用上述mixin：
http://codepen.io/anon/pen/aNVzoJ
I have a <ul> that is a flex-box and a bunch of <li>s in it which are the flex-items.
I am trying to get the <li> to have a flexible width, that stays between two sizes using min-width and max-width. It works great as long as they are on the same line. However, when they wrap, the <li> s on the new line use as much space as they can. Which means they are small on the first line, and big on the second line when there are just a few of them.
Is there a way to tell flexbox to keep the items the width after wrapping, while keeping the flexible width?
wrapping demo:
My code looks like this:
<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>
And the 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, resize your window to see it wrap.
TL;DR
This is not something I'd call a solution per se, but it's a rather elegant workaround that only uses media queries, and more importantly no 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);
}
}
}
Usage:
@include flex-wrap-fix(100px)
Explanation:
Let's say, as per the OP's example, we want each item to have a maximum width of 100px, so we know that for a browser width of 100px we can fit one item per row, and so on:
| 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 |
We can write media queries to create the following rules:
| 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) |
Like this:
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%; }
}
Of course, that's repetitive, but most likely you're using some sort of preprocessor, which can take care of the repetitiveness for you. That's precisely what the mixin in the above TL;DR section does.
All we have to do now is to specify 100px as our flex-basis, and optionally the maximum browser window width (defaults to 2000px) to create the media queries for:
@include flex-wrap-fix(100px)
Example
Finally, a forked version of the original CodePen example with the desired output, using the above mixin:
http://codepen.io/anon/pen/aNVzoJ
这篇关于如何保持包装的flex项目与上一行的元素相同的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
