我正在尝试为图片库实现 Flexbox 容器。我希望这个画廊不需要使用滚动条，而是调整图像的大小以适应屏幕。
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
#flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: blue;
height: 90%;
}
.img-wrap {
width: 25%;
height: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
</style>
</head>
<body>
<div class="text-wrap">This should always be visible</div>
<div id="flex-container">
<div class="img-wrap"><img src="https://picsum.photos/200"></div>
<div class="img-wrap"><img src="https://picsum.photos/300/200"></div>
<div class="img-wrap"><img src="https://picsum.photos/400/800"></div>
<div class="img-wrap"><img src="https://picsum.photos/500/250"></div>
<div class="img-wrap"><img src="https://picsum.photos/450/505"></div>
<div class="img-wrap"><img src="https://picsum.photos/350/520"></div>
<div class="img-wrap"><img src="https://picsum.photos/250/300"></div>
<div class="img-wrap"><img src="https://picsum.photos/550/200"></div>
<div class="img-wrap"><img src="https://picsum.photos/200"></div>
<div class="img-wrap"><img src="https://picsum.photos/300/200"></div>
<div class="img-wrap"><img src="https://picsum.photos/400/800"></div>
<div class="img-wrap"><img src="https://picsum.photos/500/250"></div>
<div class="img-wrap"><img src="https://picsum.photos/450/505"></div>
<div class="img-wrap"><img src="https://picsum.photos/350/520"></div>
<div class="img-wrap"><img src="https://picsum.photos/250/300"></div>
<div class="img-wrap"><img src="https://picsum.photos/550/200"></div>
</div>
<div class="text-wrap">This should always be visible, even without using a scrollbar</div>
</body>
</html>
问题是当窗口足够小(垂直)时，底部文本会被截断，用户需要滚动才能看到它。
我希望文本的两个部分始终可见。图像应始终变小，直到文本的两个部分都接触为止，此时可以接受滚动条。
最佳答案
在text-wrap类上添加position fixed，它将固定顶部和底部标题的位置。
.text-wrap {
postion:fixed;
}
关于html - 如何确保 flexbox 小于周围的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59150772/