如何使用纸卡创建网格布局

Question

我正在尝试混合聚合物入门套件中的 template repeater and the paper-card tutorial。

我的目标是复制那种网格：
_{（来源：instantshift.com）}

我创建了两个自定义元素：

员工列表
一名员工

员工名单：

<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>

员工：

<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>

这是我得到的：

我怎样才能达到预期的结果？是否有设置让卡片自动排列？

我怎样才能获得类似 "carriage return" 的行为？

回答结果（感谢@Snekw）：

步骤：

在导入元素的位置添加以下行（elements/elements。html 在我的例子中）

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

我的员工列表元素现在看起来像：

<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>

我得到了这个结果：

我仍然需要解决纸卡操作面板的问题。

Answer 1

您需要在 style 标签中包含 iron-flex class。

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

您将需要加载 iron-flex-layout-classes.html 元素。 Iron-flex-layout 元素包含 --layout-vertical 和 --layout-wrap 属性。

更多关于 iron-flex-layout 的信息：iron-flex-layout-classes GitHub

如何使用纸卡创建网格布局

How create a grid layout with paper-card

css

polymer

paper-elements