オーバーフローが発生した場合、どのように「右」に要素を送信しますか？

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です。