Flex отзывчивый для мобильных - PullRequest
Новая
       10

Flex отзывчивый для мобильных

0 голосов
/ 18 декабря 2018

Добрый день.

У меня есть пример flex layout 

<style>
.items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}
.items .item {
    flex: 1 0 200px;
    box-sizing: border-box;
    background: #e0ddd5;
    color: #171e42;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
</style>
<div class="items">
    <div class="item">Heriberto Nickel</div>
    <div class="item">Brittaney Haliburton</div>
    <div class="item">Maritza Winkler</div>
    <div class="item">Carmon Rigg</div>
    <div class="item">Alice Marmon</div>
    <div class="item">Lyman Steakley</div>
    <div class="item">Zenia Correa</div>
</div>

И поэтому, когда у меня размер окна браузера, все работает правильно (см. Рисунок ниже)

введите описание изображения здесь

Но если я использую dev tools chrome (см. Рисунок ниже) введите описание изображения здесь

вы можете видеть, что все работает неправильно - мне нужна каждая строка поддруг с другом.(см. рисунок ниже)

введите описание изображения здесь

Скажите, пожалуйста, как это исправить.Спасибо

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Действительно простым решением было бы добавить это в <head> вашего .html файла:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

Возможно, вам придется изменить число с initial-scale=,в зависимости от того, все ли элементы слишком большие или слишком маленькие.

0 голосов
/ 18 декабря 2018

Вы можете установить .items на flex: 1 0 100% изначально, вместо 200px, это заставит каждый элемент сидеть на отдельной строке, а затем с помощью медиа-запроса установить flex-basis из .item элементов на 200pxкогда область просмотра имеет определенную ширину или больше.

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

Подробнее о медиа-запросах можно прочитать здесь . 

<style>
.items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}
.items .item {
    flex: 1 0 100%;
    box-sizing: border-box;
    background: #e0ddd5;
    color: #171e42;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
}

@media screen and (min-width: 400px) {
  .items .item {
    flex-basis: 200px;
  }
}
</style>
<div class="items">
    <div class="item">Heriberto Nickel</div>
    <div class="item">Brittaney Haliburton</div>
    <div class="item">Maritza Winkler</div>
    <div class="item">Carmon Rigg</div>
    <div class="item">Alice Marmon</div>
    <div class="item">Lyman Steakley</div>
    <div class="item">Zenia Correa</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...