如何在Flexbox CSS中避免水平和垂直滚动条？
如何在Flexbox CSS中避免水平和垂直滚动条？
提问于 2020-02-02 19:55:40
我想创建一个包含嵌入式样式表的HTML文件。HTML文件应该在列的右上角显示矩形。
输入
如果浏览器窗口太小，矩形应该放在多个列中，并避免垂直和水平滚动条。我的输出结果是这样的。
输出
我尝试过这样编写代码。但它不起作用。有谁能建议如何做到这一点吗？
@media screen and (max-width: 400px) {
.col {
background-color: olive;
}
}
@media only screen and (min-width: 321px) {
.col {
background-color: olive;
}
}
.row {
float: right;
}
.col {
margin: 11px;
width: 80px;
height: 80px;
background-color: aqua;
}<html>
<head>
</head>
<body>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-02 20:35:03
首先，请注意，通常媒体查询应该在css样式的末尾，这样就避免了错误地覆盖它们(在这种情况下，这就是background-color: olive;无法工作的原因，无论窗口大小如何)。
其次，真正的解决方案非常依赖于数据。假设你总是只有6个盒子，容器和盒子的宽度是固定的，你可以这样做：
.row {
display:flex;
flex-direction: column;
flex-wrap: wrap-reverse;
height:500px;
align-content: flex-start;
}
.col {
margin: 11px;
width: 80px;
height: 80px;
background-color: aqua;
}
@media screen and (max-width: 400px) {
.col {
background-color: olive;
}
}
@media only screen and (min-width: 321px) {
.col {
background-color: olive;
}
}
@media only screen and (max-width: 200px) {
.row {
height: auto;
}
}<html>
<head>
</head>
<body>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
</body>
</html>
请注意，如果您需要，可以修改height: 500px;。根据您的页面结构和需求，甚至可以是procent或其他东西。如果你需要更通用的东西，没有一个完美的整体解决方案。但你可以尝试根据你的数据找到一个更好的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60025834
复制相关文章
相似问题
腾讯云开发者
