使用ng-repeat与google材料flex盒（带包装？）

Question

我正在尝试使用ng-repeat并使用弹性框创建一个2乘2网格迭代。我已经看到一些示例flex-wrap:wrap属性会产生我想要的效果，但我无法使flex-width正常工作。

以下是我的标记，分别为宽屏幕和移动视图的屏幕截图。我试图获得宽视图来渲染一个2x2的盒子。

<div layout="row"  layout-xs="column">

<div layout="row"  layout-xs="row" flex-sm="25"   flex-gt-sm="50"  ng-repeat="sellingPoints in detailCtrl.sellingPointsMenu"   class="selling-points-wrapper">
    <div class="selling-points-picture">
    <md-icon md-svg-icon="{{ sellingPoints.icon }}" aria-label="Expand"></md-icon>
    <div class="selling-points-text">{{ sellingPoints.title }}</div>
    </div>
</div>

https://imgur.com/Ceov0U6 - 广角 https://imgur.com/tuuBe0D - 移动视图

Answer 1

这是你想要的那种吗？ CodePen

标记

<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
  <div style="background:pink" flex="10"></div>
  <div flex="50" layout="row" layout-wrap>
    <div ng-repeat="item in ctrl.items" style="background:{{item}}; width:50%"></div>
  </div>
  <div style="background:grey" flex="10"></div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.items = ["red", "green", "purple", "orange"];
});