как сделать flexbox отзывчивым в мобильном? - PullRequest
Новая
       7

как сделать flexbox отзывчивым в мобильном?

0 голосов
/ 10 апреля 2020

Как я могу сделать этот flexbox отзывчивым для мобильных устройств? т.е. все элементы в направлении столбца после определения ширины экрана.

Кроме того, также сделать размер шрифта адаптивным?

Это мой CSS: 

.do-flex {
  display: flex;
  flex-wrap: wrap;
  //box-sizing: border-box;
}

.do-flex  > div {
  max-width: 200px;
  background: #e0ddd5;
  margin: 2%;
}
<div class="do-flex">
  <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
    <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
      <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>  <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
</div>

Должен ли я использовать для этого максимальную ширину?

flexbox here

1 Ответ

0 голосов
/ 10 апреля 2020

Используйте медиа-запросы для адаптивного дизайна: 

@media only screen and (max-device-width: 480px) {
  flex-direction: column;
  font-size: whatever font-size you want
}

И затем настройте любые значения, которые вы хотите внутри медиа-запроса.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

...