Wie bekomme ich einen Zeilenumbruch?

Question

Ich bin gerade auf der Suche nach Angular Material und ich bin erstaunt. Aber ich fragte mich, wie ich mehrere Karten nebeneinander platzieren könnte. Ich mache das mit einer ng-Wiederholung. Aber ich möchte, dass maximal drei nebeneinander liegen können, damit die 4. Karte dynamisch in einer neuen Reihe beginnt.

Irgendwelche Ideen wie man das ohne Custom CSS bauen?

<md-content layout-xs="column" layout="row"> 
    <div flex-xs flex-gt-xs="120" layout="column" ng-repeat="item in items"> 
     <md-card> .... </md-card> 
    </div> 
</md-content> 

Answer 1

Sie können es tun flex mit:

<md-content layout-xs="column" layout="row" flex> 
    <md-card ng-repeat="item in items" flex="33"> .... </md-card> 
</md-content> 

und die folgenden css Eigenschaft:

md-content{ 
    flex-wrap: wrap; 
} 

EDIT:

Wie @juleee wies darauf hin, es könnte auch erreicht werden durch Hinzufügen der layout-wrap Richtlinie:

<md-content layout-xs="column" layout="row" flex layout-wrap> 

, die die oben css zu md-content automatisch hinzufügen würde.