使用 Flexbox 的响应式 Justified 图片库

Question

我正在尝试根据以下示例制作图片库：

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
header div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
header div img { 
  width: 100%; 
  height: auto; 
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
  
}

<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
</header>

我所有的图片都是 200x200 像素，效果很好，但我需要用左边对齐的相同固定原始图片大小替换最后一行。

我尝试按照其他答案中的建议添加一个 ::after 元素来填充空白 space，但我没有成功。

最终，我正在考虑使用 Javascript 根据媒体查询和每行图像数量添加不显示的假图像。

还有其他更好的方法吗？

我的代码：

.c-gallery {
    font-size: 0;
    max-width: 1600px;
    display: flex;
    flex-flow: row wrap;
    a {
        flex: auto;
        width: 150px;
        margin: 5px 5px 0 0;
          img {
              height: auto;
          }
       }
    }

Answer 1

下面的怎么样。它使用 CSS 网格。通过玩 grid-template-columns: repeat(3, 200px); 你可以改变列的数量。

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-gap: .5vw
}

header div img { 
  width: 100%; 
  height: auto; 
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
}

<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
</header>

使用 Flexbox 的响应式 Justified 图片库

Responsive Justified image gallery with Flexbox

css

gallery

flexbox