CSS-即使行未满，也使图像大小相同[重复]

Question

我正在尝试为我的rails应用程序中的图像做一个布局，但我在对齐方面遇到了麻烦。

HTML

<div class="photos">
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
         <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
      </div>
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
      </div>
</div>

CSS

.photos {
  display: flex;
  flex-direction: column;
  border: 10px solid goldenrod;
}

.photo-row {
  border: 5px solid red;
  display: flex;

}

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px;  
}
.photo-wrapper:last-child {
    margin-right: 0;
}

.pending-photo {
  width: 100%;
}

我以为flexbox是最好的方法。我想要的图像在窗口调整大小，这就是为什么我有宽度：100%。

编辑：

实际上，看起来我的问题是Flex-Box的一个重复：将最后一行对齐到网格。我解决了插入空元素来填充行的问题，就像第一个答案所暗示的那样。

Answer 1

您可以在.photo-wrapper上设置最大宽度

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px; 
  max-width:calc(33.3333% - 20px); //one third minus the 20px margin
  box-sizing:border-box; // include the borders in the sizing
}

https://jsfidle.net/kk7httpso/23/