如何查看几列中的项目？

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

只需在flexbox中使用一些CSS样式

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

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