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

Question

我正在开发一个Image-Gallery-Widget,用户可以在其中设置缩略图宽度,缩略图高度和边距(缩略图之间),小部件将在一个漂亮的网格中呈现所有图像-thumnails,其中每个图像具有相同的宽度和高度.

我想知道css-flexbox或css-grid是否可以实现这一点,而无需在代码中定义行和列,也不需要断点/媒体查询.

缩略图图像包含在锚点中,因此图库项目(或网格项目)看起来像这样:

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

图库项目应该完全填充容器div,这意味着,行中的最后一个缩略图和容器div的右边缘之间不应该有间隙(除非我们没有足够的项目来填充行,即3个项目ft连续,但我们只有8个项目,那么第3行只有2个项目,右边有一个与一个项目一样宽的间隙).

图库项目永远不会宽于用户设置的缩略图宽度,因为我们不希望降低缩略图的质量.我们假设这个例子宽度为300px.图库项目之间的边距是固定的并由用户设置.如果没有足够的项目来填充行,只需左对齐它们,即如下:

我不想在CSS中定义任何断点,也不想为行/列构造添加任何html.我希望浏览器只需放置尽可能多的画廊项目,以适应容器.如果右侧有间隙(即3个缩略图*300px宽度= 900px,但容器宽度为1000px),浏览器应缩小网格项目,以便再插入一个图库项目,从而消除差距.我需要能够围绕每个图库项目定义边距.

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

你在gif中看到的是没有flexbox但是需要大量的CSS,我希望用flexbox来避免.我已经对flexbox进行了一些研究,但还没有完全理解它.

谢谢你的任何提示!

Answer 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.为了保持图像比例,您可以使用例如links(<a>)作为images(<img>)的包装器.

此外,为了防止扩大图像,你可以申请flex-grow,flex-basis并max-width在锚属性.在最后一行中拉伸图像也存在问题 - 黑客就是在容器内放置n - 1(n图像数量)空项目.

设置width并height以100%在图像上强制他们到所限定的宽度自动增长max-width属性,同时保持高宽比.

请查看工作示例: FIDDLE

Answer 2

如果您不介意使用媒体断点，请使用新的CSS 网格布局。不要忘记为其添加前缀以支持 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