6

I am working on an Image-Gallery-Widget where the user can set a thumbnail width, thumbnail height and margin (between thumbnails) and the widget will present all image-thumnails in a nice grid where each image has the same width and height.

I am wondering whether css-flexbox or css-grid makes this possible without the need to define rows and columns in code and without the need for breakpoints/media-queries.

Thumbnail-Images are wrapped in an anchor, so a gallery item (or grid-item) will look something like this:

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

The gallery items should fully fill the container div, which means, there should not be a gap between the last thumbnail in a row and the container div's right edge (except if we don't have enough items to fill the row i.e. when 3 items ft in a row, but we only have 8 items, then the 3rd row will only have 2 items and a gap to the right which is as wide as one item).

Gallery items can never be wider than the thumbnail-width the user set, because we don't want to degrade the quality of the thumbnails. Let's assume 300px width for this example. The margin between gallery items is fixed and set by the user. If there are not enough items left to fill a row, simply left align them i.e. like so:

enter image description here

I do not want to define any breakpoints in CSS nor add any html for row/column constructs. I want the browser to simply place as much gallery items side by side as fit into the container. If there's a gap on the right (ie 3 thumbnails * 300px width = 900px, but container is 1000px wide), the browser should scale down the grid items, so that one more gallery item will fit in and thus eliminate the gap. I need to be able to define a margin around each gallery item.

You can see the desired responsive behaviour (when changing the browser width) in this gif:

Desired responsive behaviour

What you see in the gif is done without flexbox but needs a ton of CSS which I was hoping to avoid with flexbox. I have researched flexbox quite some bit, but haven't been able to get my head around it fully just yet.

Thanks for any tips!

4

2 回答 2

14

使用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-basismax-widthn - 1n

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

请检查工作示例： FIDDLE

于 2017-03-30T13:12:41.073 回答
6

如果您不介意使用媒体断点，请使用新的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

于 2018-02-06T20:33:34.363 回答