Flex-控制最后一行

Question

这是我要处理的问题。 http://codepen.io/anon/pen/KpoKNW

如您所见，最后一个元素是.fill类元素。 如果缓慢缩放页面，您会看到所有其他项目（最后一行项目除外）都会相应地更改大小，但是最后一行固定为50px。

我想要的是，所有项目的行为方式都相同。 可以仅在CSS中完成此操作吗？

Answer 1

好吧，如果您对使用百分比宽度感到满意，则可以使用：

 * { 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>