如何在＆＃34;右边＆＃34;上发送元素。什么时候有溢出？

Question

我想创建以下方案中解释的行为：

每次元素在屏幕之外时，我希望将其放在右侧的新列中。

目前，所有元素都在同一列中。

以下是我的元素当前显示的方式：

  <style is="custom-style" include="iron-flex">
    .flex-wrap {
      @apply(--layout-wrap);
      @apply(--layout-vertical);
    }
  </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

可以使用大多数较新浏览器支持的colomn属性来完成：

.container {
    height: 100px;
    border: 1px solid black;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}

HTML：

<div class="container">
 <div>employee #1</div>
 <div>employee #2</div>
....
 <div>employee #x</div>
</div>

见jsfiddle。有关CSS中colomn属性的更多信息，请参见here。