这是我正在处理的问题。 http://codepen.io/anon/pen/KpoKNW
正如您所看到的，最后一个元素是.fill类元素。如果您慢慢缩放页面，您将看到所有其他项目（最终行项目除外）相应地更改大小，但最终行固定为50px。
我想要的是，所有项目的行为方式相同。这可以在css中完成吗？
答案 0 :(得分：2)
好吧，如果您对使用百分比宽度感到满意，那么您可以使用：
* {
margin: 0;
padding: 0;
/*box-sizing: border-box;*/
}
#wrap {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
}
.item {
width: 10%;
min-width: 50px;
}
@media (max-width: 500px) {
.item {
width: 20%;
}
}
@media (max-width: 267px) {
.item {
width: 50%;
}
}
@media (max-width: 125px) {
.item {
width: 100%;
}
}
img {
width: 100%;
height: auto;
display: block;
}<div id="wrap">
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
</div>
这里的好处是，您可以使用@media查询定义不同屏幕宽度中每行所需的项目数。
然而，为此，你也可以避免使用flex ：
body {
margin: 0;
padding: 0;
}
.item {
width: 10%;
min-width: 50px;
float: left;
}
@media (max-width: 500px) {
.item {
width: 20%;
}
}
@media (max-width: 267px) {
.item {
width: 50%;
}
}
@media (max-width: 125px) {
.item {
width: 100%;
}
}
img {
width: 100%;
vertical-align: top;
}<div id="wrap">
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
<div class="item">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif">
</div>
</div>