使用 CSS flexbox 或网格布局的响应式图片库答案

【问题标题】：Responsive image gallery using CSS flexbox or grid-layout使用 CSS flexbox 或网格布局的响应式图片库
【发布时间】：2017-07-11 02:55:54
【问题描述】：

我正在开发一个 Image-Gallery-Widget，用户可以在其中设置缩略图宽度、缩略图高度和边距（缩略图之间），并且该小部件将在一个漂亮的网格中显示所有图像缩略图，其中每个图像具有相同的宽度和高度。

我想知道是 css-flexbox 还是 css-grid 使这成为可能，而无需在代码中定义行和列，也不需要断点/媒体查询。

Thumbnail-Images 被包裹在一个锚点中，所以画廊项目（或网格项目）看起来像这样：

<a href="#" class="gallery-item">
    <img src="myimage" width="300" height="200" />
</a>

画廊项目应该完全填满容器 div，这意味着，一行中的最后一个缩略图和容器 div 的右边缘之间不应有间隙（除非我们没有足够的项目来填充该行，即当 3 个项目连续 ft，但我们只有 8 个项目，那么第 3 行将只有 2 个项目，并且右侧有一个与一个项目一样宽的间隙。

画廊项目的宽度永远不能超过用户设置的缩略图宽度，因为我们不想降低缩略图的质量。让我们假设此示例的宽度为 300 像素。图库项目之间的边距由用户固定和设置。如果没有足够的项目来填充一行，只需将它们左对齐，即像这样：

我不想在 CSS 中定义任何断点，也不想为行/列结构添加任何 html。我希望浏览器简单地将尽可能多的画廊项目并排放置到容器中。如果右侧有间隙（即 3 个缩略图 * 300px 宽度 = 900px，但容器为 1000px 宽），浏览器应缩小网格项目，以便再容纳一个画廊项目，从而消除间隙。我需要能够在每个画廊项目周围定义一个边距。

您可以在此 gif 中看到所需的响应行为（更改浏览器宽度时）：

您在 gif 中看到的内容是在没有 flexbox 的情况下完成的，但需要大量的 CSS，我希望使用 flexbox 来避免这些。我对 flexbox 进行了相当多的研究，但还没有完全理解它。

感谢您的任何提示！

【问题讨论】：

这里允许js吗？
不，我正在寻找仅 CSS 的解决方案。
请贴出您尝试过的代码。
@Michael_B 还没有尝试过任何代码，因为我精通 CSS，但对 flex 或网格布局一无所知，感觉这些会提供最简单的 CSS-唯一的解决方案。

标签： css flexbox css-grid

【解决方案1】：

使用flex 功能应该足以完成您的任务。请注意 IE11 中的部分支持：http://caniuse.com/#feat=flexbox。

将这些样式放在你的容器上：

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

包装样式：

.gallery a {
  flex-grow: 1;
  flex-basis: 125px;
  max-width: 300px;
  margin: 5px;
}

图片样式：

.gallery img {
  height: 100%;
  width: 100%;
}

可以使用margin 简单地定义图像之间的空间。为了保持图像比例，您可以使用例如链接 (<a>) 作为图像的包装 (<img>)。

此外，为了防止图片放大，您可以在锚点上应用flex-grow、flex-basis 和max-width 属性。在最后一行中拉伸图像也存在问题 - 破解方法是将 n - 1（其中 n 是图像数量）空项目放入容器中。

在图像上将width 和height 设置为100% 会强制它们自动增长到max-width 属性定义的宽度，同时保持纵横比。

请检查工作示例： FIDDLE

【讨论】：

最后一行呢？
我认为拉伸到整个线宽看起来会更好，不是吗？ :)
嗯...我不是 OP 所以我不知道。
非常感谢卢克！这几乎是完美的。我对这个解决方案的唯一问题是，它只是放大图像以便很好地填充行。当图像被放大时，质量会受到严重影响。我正在寻找一种解决方案，它可以通过仅以 100% 的大小显示图像或缩小它们（从不放大）以填充行来实现类似的结果。
现在在浏览器中检查。正是我想要的。再次感谢！ Here's a fiddle 我将如何实现一个实际的画廊，其中每个项目将链接到每个缩略图的更大预览。我还添加了 CSS，这样我就可以添加一个类来决定我是否想要统一宽度的项目，或者如果一行没有完全填满，项目是否可以拉伸……

【解决方案2】：

如果您不介意使用媒体断点，请使用新的CSS Grid Layout。不要忘记为其添加前缀以支持 IE10+。

网格：

.gallery {
    display: grid;
    grid-gap: 5px;
}

响应式图片：

.gallery img {
    width: 100%;
}

媒体断点（取自 Bootstrap 4 的值）

@media (max-width: 575.98px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 768.98px) and (min-width: 576px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); 
    }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (min-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); 
    }
}

jsFiddle

【讨论】：