如何查看少量欄目中的項目？

Question

我使用角材料。查看一列中的項目：

但我想在擴展父區域時在幾列中查看它。怎麼做？

的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樣式與Flexbox的

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

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