3
votes

Comment créer deux colonnes réactives dans le contenu de la carte-matte en utilisant fxLayout?

Voici mon extrait de code HTML :

.mat-card-content {
    color: rgba(0, 0, 0, 0.700);
}

Et CSS :

<mat-card-content>
    <div fxLayout="row" fxFlex="1 0 0">
        <div fxLayout="column">First</div>
        <div fxLayout="column" style="margin-left:auto">Second</div>
    </div>
</mat-card-content>

Je dois implémenter des mises en page flex à l'intérieur de l'élément de carte de matériau angulaire afin que deux colonnes soient réactives et contiendront du texte comme dans le magazine: p>

En ce moment, je tapis de carte-tête fait et ça fonctionne bien. Tout conseil sera très apprécié.

angular html css angular-material angular-flex-layout

1 commentaires

Je l'ai résolu comme:

Mon

< / mat-card-content>

3 Réponses :

3
votes

vous avez essayé ce code, il fonctionne comme vous le souhaitez

<mat-card-content>
      <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
        <div fxLayout="column">First</div>
        <div fxLayout="column">Second</div>
      </div>
</mat-card-content>

pour une meilleure compréhension

https://stackblitz.com/edit/angular-sozro8?file=src%2Fapp%2Fapp.component.html a >

0 commentaires

3
votes

Essayez comme ci-dessous:

<div fxLayout="row" fxLayoutGap="10">
  <div fxFlex="50%">
 <p> first div </p>
  </div>
  <div fxFlex="50%">
      <p> second div </p>

    </div>
</div>

0 commentaires

2
votes

Si vous souhaitez également une réactivité pour les appareils mobiles, vous pouvez utiliser flex-layout API responsive .

<mat-card-content>
   <div fxLayout.gt-sm="row" fxLayout="column" fxLayoutGap="16px">
       <div fxFlex.gt-sm="50%" fxFlex>
          First div
       </div>
       <div fxFlex.gt-sm="50%" fxFlex>
          Second div
       </div>
    </div>
</mat-card-content>

1 commentaires

c'est très gentil!