用居中替换间隙[重复]

Question

我有一个 div 可以根据窗口大小进行扩展和缩小，它将图像折叠成我喜欢的不同行，但是如何防止 div 中屏幕右侧的间隙是由于图像没有有足够的空间容纳？

如果图像没有足够的空间容纳在前一行中，我基本上想将图像水平居中，这也会减少 div 的宽度。

这就是我在视觉上的意思

目前的行为如何

这就是我想要的效果，这是一张照片店的照片，记住这一点

我仍然想保留如果您将 div 调整大小或将其扩展为特定大小，图像将减少为更少的行，这有时会导致更长的图像行。

这里是代码

#container{
  background-color: gray;
  width: 40%;
}

img{
  width: 150px;
}

<div id='container'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
</div><!--</container>-->

Answer 1

您可以使用 CSS 网格布局实现与此类似的行为：

#container{
  background-color: gray;
  width: 60%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: .25em;
}

img{
  width: 100%;
}

<div id='container'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
  <img src='http://www.wallpapereast.com/static/images/MTM3NjEyNzY4MzgyNTU5NDc0.jpg'>
</div><!--</container>-->