Как избежать горизонтальных и вертикальных полос прокрутки в Flexbox CSS? - PullRequest
Новая
       25

Как избежать горизонтальных и вертикальных полос прокрутки в Flexbox CSS?

1 голос
/ 02 февраля 2020

Я хочу создать файл HTML, который содержит встроенную таблицу стилей. Файл HTML должен показывать прямоугольники в верхнем правом углу столбца.

Ввод

enter image description here

Если окно браузера слишком маленькое, прямоугольники должны go разделяться на несколько столбцов и избегать вертикальных и горизонтальных полосы прокрутки. Мой вывод выглядит следующим образом.

Выход

enter image description here

Я попробовал свое кодирование таким образом. Но это не работает. Кто-нибудь может подсказать, как это сделать? 

@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 Ответ

0 голосов
/ 02 февраля 2020

Прежде всего, обратите внимание, что обычно медиа-запросы должны быть в конце стиля 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; можно изменить, если вам нужно. Может быть даже проц или что-то еще в зависимости от структуры вашей страницы и ваших потребностей. Если вам нужно что-то более общее c, то не существует идеального общего решения. Но вы можете попытаться найти лучший в зависимости от ваших данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...