Angular Flex Layout: Адаптивный макет, сочетающий строку и столбец - PullRequest
Новая
       33

Angular Flex Layout: Адаптивный макет, сочетающий строку и столбец

0 голосов
/ 08 июня 2018

Я учусь flex-layout , и я пытаюсь создать адаптивный интерфейс.У меня многолетний опыт работы с системой начальной загрузки, но я не могу понять, как выполнить следующее ( live demo ):

На больших мониторах: enter image description here

На средних мониторах: enter image description here

На мобильных телефонах:

enter image description here

Если я правильно понимаю, я должен использовать комбинацию rows и columns, как показано ниже: 

    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
   </div>

На маленьком экране раскладка меняется с row на column означает, что я реализовал примеры пользовательского интерфейса выше для больших и мобильных мониторов.

Вопрос: Как я могу реализовать пользовательский интерфейс для мониторов среднего размера (см. рисунок выше)?Я не могу понять, как объединить row и column

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Я бы минимизировал ваш код, зацикливаясь на массиве элементов.И я изменил переход от md к sm вместо того, чтобы идти прямо к xs, но это ваше предпочтение.Я также вычитаю пробел в макете (-0,5%). 

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
 <ng-container *ngFor="let item of items">
    <li
      fxFlex="0 1 calc(25% - 0.5%)"
      fxFlex.lt-md="0 1 calc(50% - 0.5%)"
      fxFlex.lt-sm="100%">
   </li>
</ng-container>
   </div>
0 голосов
/ 08 июня 2018

Вы можете попробовать это следующим образом: 

.container { // for desktop & tablet
    display: flex;
    flex-flow: row wrap;
}

.container div {
    width: 25%
}

@media for middle { // for tablet (mid)
    .container div {
        width: 50%
    }
}

@media for mobile { //for mobile
    .container {
        flex-direction: column;
    }

    .container div {
        width: 100%
    }
}

Надеюсь, это поможет, извините за не такие подробности, но это просто быстрый совет с flex.

Спасибо

...