Angular flex-Layout mit ngFor

Ich bin sehr neu zu beugen-Layout und Probleme beim Fixieren des folgenden:Angular flex-Layout mit ngFor

Mein ngFor:

<div fxLayout.xs="column"> 
<country fxFlex *ngFor="let country of countries" [country]="country"></country> 
</div>

Ergebnis:

Was, wenn ich nur 3 Länder will eine Reihe, mit anderen Worten, wenn ich möchte, dass das letzte "Deutschland" in der nächsten Reihe ist?

Ist dies nur möglich, indem Sie mehrere fxLayout 's erstellen? Damit meine ich 2 Loops, 1 um die Anzahl fxLayout 's und eine weitere innere Schleife zu erstellen, um meine Länderkomponenten anzuzeigen (fxFlex Artikel). Danke im Voraus!

Quelle

2017-02-13 Jdruwe

Was passiert, wenn Sie 'min-width setzen: 33%' auf jedem Feld? In der Standard-Flexbox wird sichergestellt, dass nur 3 Einträge maximal in einer Zeile sind –

fxLayout ist wahrscheinlich eine Angular 2 Direktive. Bitte stellen Sie die resultierenden (jsfiddle.net) HTML und CSS zur Verfügung, die im Browser erscheinen. Ich kenne die Lösung für diese Situation. – Marian07

Update: Tatsächlich ist es eine Ng2-Richtlinie (https://github.com/angular/flex-layout). Ich werde morgen einige Tests machen, damit ich die Antwort mit seinen Methoden geben kann. – Marian07

fand ich die Lösung auf: How to control number of items per row using media queries in Flexbox?

HTML:

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap"> 
    <country fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let country of countries" [country]="country"></country> 
</div>

Typoskript:

//I use this to show of expression bindings in flex-layout and because I don't want the calculated value in the HTML. 
regularDistribution = 100/3;

Wrap: multi-line/links nach rechts in ltr; rechts in rtl

Der Schlüssel hier nach links ist die fxLayoutWrap = "wrap"

Quelle

2017-02-14 07:34:15 Jdruwe

Angular flex-Layout mit ngFor

Antwort

Verwandte Themen