Как сделать так, чтобы div-размеры flex-контейнера имели ширину 100% при изменении размера браузера? - PullRequest
Новая
       8

Как сделать так, чтобы div-размеры flex-контейнера имели ширину 100% при изменении размера браузера?

1 голос
/ 21 апреля 2019

Можно ли получить div в контейнере felx (display: flex) равным 100%, если размер экрана уменьшен до размера экрана мобильного телефона (что-то вроде max-width: 480px)?

Давайте возьмем это в качестве примера: 

.flex-container { background-color: #F4F7F8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; }
.item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; }
.four { flex: 4; }
.two { flex: 2; }
.one { flex: 1; }
```
<div class="flex-container">
    <div class="item four">4</div>
    <div class="item two">2</div>
    <div class="item one">1</div>
</div>

Ссылка на jsFiddle

При уменьшении размера экрана рабочего стола / ноутбука до размера экрана мобильного телефона Iхотел бы, чтобы это было что-то вроде

a busy cat

Я сделал это, добавив 

@media only screen and (max-width: 480px) {
.flex-container { display:block; }
.item { width: 100%; }
}

в файл CSS.

Я незнать, если это правильный способ сделать это или нет.

Ответы [ 2 ]

1 голос
/ 21 апреля 2019

изменить тип направления гибкого контейнера на столбец.это поможет 

.flex-container { flex-direction: column; }
1 голос
/ 21 апреля 2019

Если вы используете flex, правильным способом для этого является применение flex-direction: column к flex-container.В этом случае элементы Flex будут реорганизованы в столбцы вместо строк (как на больших экранах): 

@media only screen and (max-width: 480px) {
  .flex-container { flex-direction: column; }
  .item { width: 100%; }
}

направление Flex

...