小开

使用 max-width: 40px而不是 max-width: 100px

小开

这并不完美，但值得一试

变化是

li
width: 7.1428%
flex: 0 0 auto


figure
margin: 0 auto
background-color: darkgreen
min-width: 40px
max-width: 100px

将 liflex 更改为“00 auto”，并将 liwidth 更改为基于利润的数目。
将最小和最大宽度从 li 移动到图形
将绿色背景移到图形上，并将图形居中这个名字

小开

它的工作不是很好，但你可以实现在这个方向的柱子。

column-gap: 10px;
column-width: 150px;

Https://codepen.io/hobbeshunter/pen/ogbynx

小开

将 min-width和 max-width设置为百分比允许所有图像在转换到下一行时保持相同的宽度。这不是理想的，但更接近你想要的？

li {
min-width: 15%;
max-width: 15%;
}

小开

最佳答案

DR

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

用法:

在你的伸缩项上应用混合:

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

更新:

只要你的弹性容器宽度与视口大小相匹配，上面的混合应该可以做到这一点，就像 OP 示例中的情况一样。否则媒体查询不会帮助您，因为它们总是基于视口宽度。但是，您可以使用 css-element-queries库及其元素查询而不是浏览器媒体查询。下面是一个可以应用于 flex 集装箱的混合函数:

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

当然，这是重复性的，但最有可能的是，您使用的是某种预处理器，它可以为您处理重复性问题。这正是上面 DR部分中的 Mixin 所做的。

我们现在要做的就是指定 100px作为我们的 flex-basis，而 可以选择是浏览器窗口的最大宽度(默认为 2000px) ，以便创建媒体查询:

@include flex-wrap-fix(100px)

例子

最后，使用上面的 mix in，创建一个带有所需输出的原始 CodePen 示例的分支版本:

Http://codepen.io/anon/pen/anvzoj

小开

我想我明白了... 但是太粗糙了。结果是14个图像，每个图像的宽度从100px 缩放到40px，甚至在多行上也是如此。

增加了14个原始 <li>的副本集，并将它们添加到柔性 <ul>。

接下来，第二个集合变得不可见:

li:nth-of-type(n + 15) {
visibility: hidden;
}

In order to maintain uniform flexibility the following changes to each <li>:
```
li {
min-width: 40px;
max-width: 10%;
flex: 1 0 100px;
}
```

Please review the CodePen

and/or the Snippet in Full Page mode.

ul {
display: flex;
flex-wrap: wrap;
max-height: 258px;
}
li {
min-width: 40px;
max-width: 10%;
flex: 1 0 100px;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
background-color: tomato;
}
li {
margin: 0.5em;
background-color: darkgreen;
}
li img {
width: 100%;
opacity: 0.5;
}
li figure,
li img {
margin: 0;
padding: 0;
}
li:nth-of-type(n + 15) {
visibility: hidden;
}

<ul>
<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/101/101">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/201/201">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/80/80">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/111/111">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/40/40">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/110/110">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/75/75">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/89/89">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/32/32">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/61/61">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/320/320">
</figure>
</li>






<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/101/101">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/201/201">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/80/80">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/111/111">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/40/40">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/110/110">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/75/75">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/89/89">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/32/32">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/61/61">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/320/320">
</figure>
</li>
</ul>

小开

我的解决方案并不理想，因为它依赖于 JQuery: http://codepen.io/BigWillie/pen/WwyEXX

CSS

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


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

JavaScript

var eqRowFlexItem = function(elem) {
var w;
var $elem = $(elem);
// Clear out max-width on elements
$elem.css('max-width', '');
w = $(elem).eq(0).width();
$(elem).css('max-width', w);
}


eqRowFlexItem('li');


$(window).resize(function() {
eqRowFlexItem('li');
});

我不完全确定这是否能解决问题。我发现了这篇文章，因为标题和我遇到的问题相吻合。我追求的是一种效应，即在较大的屏幕上每行有更多的元素，而在较小的屏幕上每行有更少的元素。在这两种情况下，这些元素也需要扩展，以适应... ... 跨设备。

但是，最后一行上的那些杂散元素总是会扩展以填充剩余的空间。

JQuery 获取第一个元素的宽度-并将其作为最大宽度应用于每个元素。OP 希望块落在最小宽度/最大宽度范围内。在 CSS 中设置最大宽度似乎是可行的。我们清除了元素的最大宽度，所以它默认为 CSS 中的最大宽度... 然后得到实际的宽度。

小开

我一直在试验你的 codepen flex: 0 1 10%

当然，你可以设置任何你想要的弹性基础，我只是想证明这一点，如果你设置弹性基础，并允许它收缩，它将表现得更好，在这种情况下。

我觉得这就是你需要的，这是预告片: Http://codepen.io/anon/pen/bwqnez

干杯

小开

我也遇到了同样的问题，所以我使用了一个非常小的 Jquery 来控制盒子的宽度，使它们即使在包装后也保持相同的宽度。

我的样带在 CodePen 弹性换行，在新行上具有相同的宽度上

function resize(){
var colWidth;
var screen = $(window).width();
  

if(screen < 576){
colWidth = Math.round(screen / 2) - 31;
$(".item").width(colWidth);
}
if(screen > 575 && screen < 768){
colWidth = Math.round(screen / 3) - 31;
$(".item").width(colWidth);
}
else if (screen > 767 && screen < 992){
colWidth = Math.round(screen / 4) -31;
$(".item").width(colWidth);
}
else if (screen > 991 ){
colWidth = Math.round(screen / 6) -31;
$(".item").width(colWidth);
}
}
  

window.onresize = function() {
resize();
}


resize();

html,
body{
padding:0;
margin:0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: left;
background-color:#ddd;
}


.wrap    {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}


.item {
background: tomato;
height: 100px;
margin:0 15px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flex-container wrap">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>

小开

对于手写笔，您可以使用这个混合: https://codepen.io/anon/pen/Epjwjq


flex-wrap-fix($basis, $max) {
flex-grow: 1
flex-basis: $basis
max-width: 100%


$multiplier = ceil($max / $basis)


for i in (1..$multiplier) {
@media(min-width: ($basis * i)) {
max-width: percentage(1/i)
}
}
}

小开

我来这里是为了解决同样的问题，我有一个弹性盒子。我已经意识到，这是现在更容易与 display: grid作为详细的给你和给你。

小开

如果布局是固定的，您可以简单地添加隐藏的项目，并使用 css 断点切换它们的可见性，以便像素进行包装。

例如，在下面的场景中，。列表有3个 列表项元素，并且对于第3个。Column-list-item 元素包装到下一行，我只是让第4个 列表项元素 。隐藏的项目-通常是不可见的-可见的:

.columned-list {
display: flex;
flex-wrap: wrap;
margin-left: 35px;




justify-content: flex-start;






.hidden-item {
display: none !important;


@media only screen and (max-width: 1375px) {
flex: 1 0 auto !important;
min-width: 410px !important;
width: 30% !important;
margin: 0 37px 37px 0 !important;
max-width: 100% !important;
display: flex !important;
background-color: #fff !important;
}


@media only screen and (max-width: 928px) {
display: none !important;
}
}


.columned-list-item {
flex: 1 0 auto;
min-width: 410px;
min-height: 1px !important; // <3 IE.
width: 30%;
margin: 0 37px 37px 0;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: #676562;
background-color: #f2f3f5;


a:nth-of-type(1) {
position: relative;
min-height: 84px;
width: 100%;


img {
width: 100%;
height: auto;
}


div {
min-height: 88px;
max-width: 203px;
padding: 0 15px;
top: 50%;
transform: translateY(-50%);
position: absolute;
display: flex;
justify-content: center;
align-items: center;


background-color: #fff;
opacity: 0.6;
span {
height: 55px;
font-family: 'Trade Gothic Next LT W04 Rg', sans-serif;
font-size: 28px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: 0.7px;
text-align: left;
color: #676562;
}


}


}


a:nth-of-type(2) {


padding: 10px 35px;
display: flex;
flex-direction: column;
min-height: 161px;
max-width: 390px;


strong {
font-family: 'Trade Gothic Next LT W04 Bold', sans-serif;
font-weight: bold;
text-align: center;
}
span {


font-family: 'Trade Gothic Next LT W04 Light', sans-serif;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #676562;


}
}


.buttons-block {
display: flex;
justify-content: space-between;
align-items: center;
width: 298px;
max-width: 100%;
margin: 10px 0 23px 0;


.button-a {
width: 114px;
height: 22px;
min-height: 1px;
box-shadow: 0px 1px 0 0 rgba(0, 0, 0, 0.16);
background-color: #f28d4e;
display: flex;
justify-content: center;
align-items: center;


span {
font-family: 'Trade Gothic Next LT W04 Rg', sans-serif;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
}


.button-b {
margin-bottom: 0;
padding: 0;
}


}


@media only screen and (max-width: 760px) {
margin: 0 0 20px 0;
}
@media only screen and (max-width: 410px) {


min-width: auto;
width: 100%;
}
}


@media only screen and (max-width: 760px) {
display: flex !important;
flex-direction: column;
align-items: center;
margin-left: 0;
padding-top: 10px;
}




}

小开

备用电网

这不是你想要的答案，但它很好用:

display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));

Https://codepen.io/omergal/pen/povzjrz

ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}


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


ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
background-color: tomato;
}


li {
margin: 0.5em;
background-color: darkgreen;
}


img {
width: 100%;
opacity: 0.5;
}
figure,
img {
margin: 0;
padding: 0;
}

<ul>
<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/101/101">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/201/201">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/80/80">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/111/111">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/40/40">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/110/110">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/75/75">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/89/89">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/32/32">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/61/61">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/320/320">
</figure>
</li>
</ul>

小开

这是柔性箱的一个局限性。您可以做的最好的事情是设置一个最大宽度，包装(生长)项将尊重。你需要 CSS 网格为此。

小开

我是新的前端和学习弹性框，我附加了一个图片库的例子，我试图建立看看是否有帮助。

.main-container {
display: flex;
flex-wrap: wrap;
flex-grow: 1 ;
justify-content: space-around;
}
h1 {
text-align: center;
}


img{
border: 4px solid black;
}


div.gallery:hover {
border: 10px solid rgb(97, 94, 94);
}


div.desc {
padding: 15px;
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>My Image Gallery</h2>
<div class="main-container">
<div class="gallery">
<a target="_blank" href="./assets/cat1.jpg">
<img src="./assets/cat1.jpg" alt="Image 1" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>




<div class="gallery">
<a target="_blank" href="./assets/cat2.jpg">
<img src="./assets/cat2.jpg" alt="Image 2" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="gallery">
<a target="_blank" href="./assets/cat3.jpg">
<img src="./assets/cat3.jpg" alt="Image 3" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="gallery">
<a target="_blank" href="./assets/cat4.jpg">
<img src="./assets/cat4.jpg" alt="Image 4" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="main-container">
<div class="gallery">
<a target="_blank" href="./assets/cat1.jpg">
<img src="./assets/cat1.jpg" alt="Image 1" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
  

  

<div class="gallery">
<a target="_blank" href="./assets/cat2.jpg">
<img src="./assets/cat2.jpg" alt="Image 2" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
  

<div class="gallery">
<a target="_blank" href="./assets/cat3.jpg">
<img src="./assets/cat3.jpg" alt="Image 3" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
  

<div class="gallery">
<a target="_blank" href="./assets/cat4.jpg">
<img src="./assets/cat4.jpg" alt="Image 4" width="400" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>

enter code here

如何保持包装的 Flex 项目的宽度与前一行的元素相同？

DR

美心(SCSS) :

用法:

更新:

说明:

例子

备用电网