如何确保flexbox小于周围的元素
如何确保flexbox小于周围的元素
提问于 2019-12-03 13:38:55
我正在尝试为一个图片库实现一个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>问题是，当窗口足够小(垂直)时，底部的文本会被切断，用户需要滚动才能看到它。
我希望文本的两个部分始终可见。图像应该始终变小，直到文本的两部分接触，此时滚动条是可以接受的。
Stack Overflow用户
发布于 2019-12-03 14:46:38
在文本换行类上添加固定位置，它将固定顶部和底部标题的位置。
.text-wrap {
postion:fixed;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59150772
复制相关文章
相似问题
腾讯云开发者
