web-dev-qa-db-fra.com

Angular Flex Layout: mise en page réactive combinant ligne et colonne

Im learning flex-layout , et j'essaie de créer une interface utilisateur réactive. J'ai des années d'expérience avec le système de grille bootstrap, mais je n'arrive pas à comprendre comment accomplir ce qui suit ( démo en direct ):

Sur les grands écrans: enter image description here

Sur les moniteurs moyens: enter image description here

Sur le mobile:

enter image description here

Si je comprends bien, je dois utiliser une combinaison de rows et columns, comme le code ci-dessous

    <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>

Sur petit écran, la mise en page passe de row à column, ce qui signifie que j'ai mis en œuvre les exemples d'interface utilisateur ci-dessus pour les moniteurs grands et mobiles.

Question: Comment puis-je implémenter l'interface utilisateur pour les moniteurs moyens (voir l'image ci-dessus)? Je n'arrive pas à comprendre comment combiner row et column

htmlcssflexboxangular-flex-layout
7
Vingtoft

Je minimiserais votre code en faisant une boucle sur le tableau des éléments. Et j'ai changé la transition de md à sm au lieu d'aller directement à xs, mais c'est votre préférence. Je soustrais également l'écart de mise en page (-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>
6
Nosheep

Vous pouvez essayer de cette façon:

.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%
    }
}

J'espère que cela vous aidera, désolé pour les détails, mais ce n'est qu'une astuce rapide avec flex.

Merci

3
Tsurule Vol