Erstellen eines Rasterlayouts mit Papierkarte

Question

Ich versuche, die template repeater und im Polymer Starter Kit zu mischen.

Mein Ziel ist es, diese Art von Gitter zu kopieren: http://cdn.instantshift.com/wp-content/uploads/2014/11/material-design-01.jpg

ich zwei benutzerdefinierte Elemente erstellt:

1. eine Liste der Mitarbeiter
2. Ein Mitarbeiter

Mitarbeiterliste:

<style is="custom-style"> 
#board { 
    @apply(--layout-vertical);   <<= HERE ARE DEFINED THE LAYOUT OF THE GRID 
    @apply(--layout-wrap); 
    height: 344px; 
    width: 384px; 
} 
#board > paper-card { 
    box-sizing: border-box; 
    max-width: 184px; 
    margin: 4px; 
    flex: 0 0 auto; 
} 
</style> 
    <template> 
    <div id="board"> 
     <template is="dom-repeat" items="{{employeesArray}}"> 
      <employee-element name="{{item.title}}" 
          preview="{{item.preview}}" 
          width={{item.width}} height={{item.height}}> 
      </employee-element> 
     </template> 
    </div> 
    </template> 

Mitarbeiter:

<paper-card 
    heading="{{name}}" 
    image="{{preview}}" 
    style="max-width:{{width}}px; 
     max-height:{{height}}px;" 
    > 
    <div class="card-actions"> 
    <paper-icon-button class="favorite" icon="favorite"></paper-icon-button> 
    <paper-icon-button class="bookmark" icon="bookmark"></paper-icon-button> 
    <paper-icon-button class="share" icon="social:share"></paper-icon-button> 
    </div> 
</paper-card> 

Hier ist, was ich bekommen:

Wie kann ich das Ergebnis erwartet nähern? Gibt es eine Einstellung, bei der sich die Karte automatisch anordnet?

Wie bekomme ich ein "Carriage Return" -ähnliches Verhalten?

---

Antwort ergibt (dank @Snekw):

Schritte:

Fügen Sie die folgende Zeile, wo Sie Ihre Elemente (Elemente/elements.html in meinem Fall) importieren

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 

Das Element Meine Mitarbeiterliste sieht jetzt wie folgt aus:

<style is="custom-style" include="iron-flex"> 
    .flex-wrap { 
     @apply(--layout-horizontal); 
     @apply(--layout-wrap); 
    } 
    </style> 
    <template> 
    <div class="container flex-wrap"> 
     <template is="dom-repeat" items="{{employeesArray}}"> 
      <employee-element name="{{item.title}}" 
          preview="{{item.preview}}" 
          width={{item.width}} height={{item.height}}> 
      </employee-element> 

     </template> 
    </div> 
    </template> 

Und ich dieses Ergebnis:

Ich habe immer noch das Problem mit dem Papier-Karte Aktionsfenster zu beheben.

Answer 1

Sie müssen die Klasse iron-flex auf Ihrem Tag style einschließen.

<style is="custom-style" include="iron-flex"> 
//your styling 
</style> 

Sie müssen das Element iron-flex-layout-classes.html laden. Eisen-Flex-Layout-Element enthält die --layout-vertical und --layout-wrap Eigenschaften.

Mehr zum Eisen-Flex-Layout hier: iron-flex-layout-classes GitHub