いくつかの列で項目を表示するにはどうすればよいですか？

Question

角度のある素材を使用しています。 1つの列の項目を表示する：

しかし、私は親領域を拡張するときにそれをいくつかの列で表示したいと考えています。どうやってするの？

htmlコード：

<md-content> 
<div layout="row"> 
    <div layout="column" class="itemsList padding-left-30" ng-if="vm.timeLineShow"> 
     <md-whiteframe class="md-whiteframe-8dp capitalize itemsInList padding-top-10 " 
         ng-repeat="item in vm.workItems | filter:search">{{item.name}} 
     </md-whiteframe> 
    </div> 

    <!-- In this div I would like to view few columns with items--> 
    <div ng-if="!vm.timeLineShow" flex class="expandedItems"> 
     <md-whiteframe class="md-whiteframe-8dp capitalize itemsInList padding-top-10 " 
         ng-repeat="item in vm.workItems | filter:search">{{item.name}} 
     </md-whiteframe> 
    </div> 
</div> 

Answer 1

だけフレキシボックスにいくつかのCSSスタイルを使用し

.itemList{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

http://codepen.io/anon/pen/ZpZmXO