我正在尝试制作一个16：9的图片库，图片库的宽度和高度都受到容器的限制。它们应该自动 Package 成最适合缩放的行数或列数。我知道如何通过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>下面是相关的CSS。.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;
}基本上是this is what I want，我可以通过在flexbox里面的项目上设置flex-basis来实现，但是，这是没有响应的;例如，如果我将flex-basis设置为25%（实际上是24%），那么我将始终得到4列，如果图像不能被4完全除尽，那么last row grows;它们需要保持相同的大小!如果有，比如说，40张图片，那么将有10行，这将超出容器的边界!（This是该行为的外观）
我该怎么做？这是需要JS的东西吗？我应该使用网格而不是Flex吗？
1条答案
按热度按时间eeq64g8w1#
最下面一行是因为
.video-container .video上的flex: 1;而增长的，相反，只需使用计算出的width，该width将gap: 1vmin作为间距的因子。例如，您可以将
.video-container .video设置为width: calc(25% - 1vmin)。