使用CSS flexbox或网格布局的响应式图库-Java 学习之路

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

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.

缩略图图像包含在锚点中，因此图库项目（或网格项目）看起来像这样：

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

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

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

enter image description here

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

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

Desired responsive behaviour

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

谢谢你的任何提示！

2 回答

11
使用 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
回复于 2024-04-27T13:04:14+08:00

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

回复于 2024-04-27T13:04:14+08:00

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

2 回答

相关问题