Angular Material md-list flexing

Question

我想使用Angular Material的md-list来显示元素，使用响应式设计。我的任务是如果媒体设备很小则在1列中显示这些项目，如果它大于小则在3列中显示。 我想是这样的事情：

<md-list layout="row" layout-wrap>
  <md-list-item flex="33" flex-sm="100" class="md-2-line" ng-repeat="item in items">
    <div class="md-list-item-text">
      <h3>{{occasionType.occasionType}}</h3>
      <p>{{occasionType.name}}</p>
    </div>
  </md-list-item>
</md-list>

但它不起作用。有人可以帮忙吗？

Answer 1

尝试使用layout-sm="column"

<div layout="row" layout-wrap  layout-sm="column">
<div flex="33" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
  <h3>{{occasionType.occasionType}}</h3>
  <p>{{occasionType.name}}</p>
</div>
</div>
</div>

它对我有用。