web-dev-qa-db-fra.com

Angular 2 alignement de matériau et de flexion

J'essaie d'utiliser un matériau angulaire 2 et une mise en page flexible pour créer une galerie d'éléments sensible. Après des heures et des heures, je ne peux toujours pas centrer mes éléments:  centered

C'est le code source:

<div fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
  <md-card fxFlex.gt-md="20" fxFlex.md="28"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>
    <img md-card-image src="http://placehold.it/350x200">
    <md-card-content>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>

J'ai essayé différentes valeurs pour fxFlexAlign ( https://github.com/angular/flex-layout/wiki/API-Documentation ) mais aucune d'entre elles n'atteint ce dont j'ai besoin, c'est-à-dire que les éléments sont centrés ou, autrement dit, distribuez le carré rouge entre le côté droit et le côté gauche.

Y a-t-il un moyen d'y parvenir? 

MODIFIER

Malheureusement, justify-content: space-between; ne fonctionne pas si j'ai un nombre d'éléments dynamique. Finalement, ils seront encapsulés dans une nouvelle ligne, puis l'élément de la dernière ligne ne ressemblera pas à ce qui était attendu:

.container {
  display:flex;
  width:100%;
  flex-flow:row wrap;
  justify-content: space-between;

  
}
.block {
  width:100px;
  height:100px;
  border:1px solid red;
}
<div class="container">
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>

cssangularflexboxangular-material2
5
mario595
<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">

Ajout de fxLayoutAlign="center" travaillé pour moi, les résultats sont maintenant placés au centre.

2
Sriram

En retard pour répondre mais son travail sur l'article dynamique, je ne trouve pas la formule exacte

ma formule est 

margin-bottom = (100 - (total item in row * fxFlex on item)) / total space between item in row

Exemple

margin-bottom = (100 - (5 * 19) ) / 4
margin-bottom = (100 - 95) / 4
margin-bottom = 5 / 4 = 1.25%

Sur votre codeHTML 

<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="space-between">
    <!-- margin-bottom = gt-md = 1.25%, md = 6.5% , sm  = 22% !-->
    <md-card fxFlex.gt-md="19" fxFlex.md="29"  fxFlex.sm="39" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
        <md-card-header>
        <md-card-title>element</md-card-title>
        </md-card-header>
        <img md-card-image src="http://placehold.it/350x200">
        <md-card-content>
        <p>
            Lorem Ipsum
        </p>
        </md-card-content>
    </md-card>
</div>

CSS

md-card {
  margin-bottom: 6.25%; // md flex 29

  // this commented margin is the responsive margin calculation you must implement
  // margin-bottom: 1.25%; // gt-md flex 19
  // margin-bottom: 22%; // sm flex 39
  // margin-bttom : 2%; // sm flex 49 better use this one
}
0
Ade Novan

Vous pouvez essayer ce concept pour obtenir une fonctionnalité similaire. Vous devrez peut-être modifier les valeurs% de css pour obtenir des résultats plus parfaits.

.sp{
	display: flex;
	justify-content: center;
}

.i{
	width: 23%;
    height: 133px;
    background-color: grey;
    margin: 3px;
    color: #fff;

}

.p{
	  display: flex;
    flex-wrap: wrap;
    width: 56%;
}
<div class="sp">
  <div class="p">
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
</div>
</div>

0
Aman Deep Sharma

dans la propriété flexbox spread blocks à bloc parent justify-content: space-between;

.container {
  display:flex;
  width:100%;
  flex-flow:row wrap;
  justify-content: space-between;

  
}
.block {
  width:100px;
  height:100px;
  border:1px solid red;
}
<div class="container">
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>

0
Konstantin Okhotnick