如何避免 Flexbox CSS 中的水平和垂直滚动条？

Question

我想创建一个包含嵌入样式 sheet 的 HTML 文件。 HTML 文件应在列的右上角显示矩形。

输入

如果浏览器window太小，矩形应该分成多列，避免垂直和水平滚动条。我的输出是这样的。

输出

我试过用这种方式编码。但它不起作用。有人可以建议怎么做吗？

@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>

Answer 1

首先请注意，通常媒体查询应该在 css 样式的末尾，这样你就可以避免错误地覆盖它们（在这种情况下，这就是 background-color: olive; 不起作用的原因，无论 window 大小）。

其次，解决方案确实在很大程度上取决于数据。假设你总是只有 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;可以根据需要进行修改。根据您的页面结构和您的需要，甚至可以是百分比或其他内容。如果您需要更通用的东西，则没有完美的整体解决方案。但是你可以根据自己的数据尝试找到更好的。

如何避免 Flexbox CSS 中的水平和垂直滚动条？

How to avoid horizontal and vertical scroll bars in Flexbox CSS?

html

css

flexbox

responsive