css - 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>

它对我有用。