Почему мой первый div за окном? - PullRequest
Новая
       7

Почему мой первый div за окном?

1 голос
/ 31 января 2020

Я просто пытаюсь использовать FlexLayout для разных размеров экрана. 3 коробки / деления ниже должны располагаться бок о бок на большом дисплее, если они уменьшаются, они должны быть друг над другом. Но мой верхний div находится за окном, и я не хочу этого .. Как я могу это исправить? 

<div class="container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-around center">
  <div class="asd" [style.background-color]="'black'"></div>
  <div class="asd" [style.background-color]="'green'"></div>
  <div class="asd" [style.background-color]="'blue'"></div>
</div>

.asd {
  min-height: 500px;
  min-width: 400px;
}

.container {
  height: 100%;
}

1 Ответ

0 голосов
/ 31 января 2020

Flex-элементы не будут складываться, если вы не используете flex-wrap: wrap вместе с объявлением min-width или flex-basis.

По сути, если количество flex-элементов в строке должно быть меньше их минимальную ширину они перенесут на следующую строку. 

.flexContainer {
   display:flex;
   max-width: 80%;
   margin: 20px;
   
   justify-content: space-between;
   flex-wrap: wrap;
}

.flexItem {
   background: #dddddd;
   padding: 20px;
   min-width: 200px;
   margin: 0 10px 10px 0;
}
<div class="flexContainer">
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
</div>
...