CSS：flexbox 按比例缩放其内容直到它们适合，而不会溢出的画廊？

Question

我正在尝试制作一个 16:9 图像的画廊，这些图像限制其容器的宽度和高度。 它们应该自动包装成最适合缩放它们的行或列。 我知道如何通过 JS 执行此操作，但如果可能的话，我宁愿选择 CSS 解决方案。

 /* vvv For demonstration purposes vvv */ body { background-color: grey; } body, body * { padding: 0; margin: 0; overflow: hidden; text-align: center; } div.video img.test { /* So we can see the images. */ background-color: #e6e6e6; } div.container { /* The actual size of this container will be responsive. */ /* This basically simulates the aspect ratio for this fiddle, I guess. */ width: 50vw; height: 90vh; background-color: white; } /* ^^^ For demonstration purposes ^^^ */.container { display: flex; flex-direction: column; gap: 2vmin; padding: 10px; box-sizing: border-box; }.video-container { flex: 1; display: flex; flex-wrap: wrap; gap: 1vmin; align-content: flex-end; justify-content: center; }.video-container.video { flex: 1; /* flex-basis: 24%; */ }.video-container.video>* { width: 100%; height: auto; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>help.c</title> </head> <body> <div class="container"> <h1> Header </h1> <div> This is just some body text. The quick brown fox or whatever, Basically. the gallery should fit in the remaining space beneath this element. </div> <div class="video-container"> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> </div> </div> </body>

下面是相关的.video-container是画廊。 .video包含图像（视频缩略图）。

.video-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1vmin;
    align-content: flex-end;
    justify-content: center;
}
.video-container .video {
    flex: 1;
    /* flex-basis: 24%; */
}
.video-container .video > * {
    width: 100%;
    height: auto;
}

基本上，这就是我想要的。 我可以通过在 flexbox 中的项目上设置 flex-basis 来实现它。但是，这不是响应式的； 例如，如果我将 flex-basis 设置为 25%（嗯，24%），那么我将始终得到 4 列。 如果图像没有完全除以 4，那么最后一行会增长； 它们需要保持相同的大小，如果有 40 张图像，那么就会有 10 行，这将超出容器的范围！ （这就是该行为的样子。）

我该怎么做呢？ 这是需要JS的东西吗？ 我应该使用 grid 而不是 flex 吗？

Answer 1

由于flex: 1; 在.video-container.video上。 相反，只需使用计算出的width来计算gap: 1vmin用于间距。

因此，例如，您可以将.video-container.video设置为width: calc(25% - 1vmin) 。

 body { background-color: grey; } body, body * { padding: 0; margin: 0; text-align: center; } div.video img.test { background-color: #e6e6e6; } div.container { width: 50vw; background-color: white; }.container { display: flex; flex-direction: column; gap: 2vmin; padding: 10px; box-sizing: border-box; }.video-container { flex: 1; display: flex; flex-wrap: wrap; gap: 1vmin; align-content: flex-end; justify-content: flex-start; }.video-container.video { width: calc(25% - 1vmin); }.video-container.video>* { width: 100%; height: auto; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>help.c</title> </head> <body> <div class="container"> <h1> Header </h1> <div> This is just some body text. The quick brown fox or whatever, Basically. the gallery should fit in the remaining space beneath this element. </div> <div class="video-container"> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> <div class="video"> <img width="1920" height="1080" class="test" /> </div> </div> </div> </body>