Google材料フレックスボックスでng-repeatを使用する（折り返し付き）

Question

フレックスボックスを使用してng-repeatで2x2グリッドを繰り返し作成しようとしています。私は、flex-wrap:wrap属性が私が望む効果を生み出すいくつかの例を見ましたが、フレックス幅が正しく働くようにはできませんでした。

以下は、私が持っているマークであり、それぞれワイドビューとモバイルビューのスクリーンショットです。私は、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"]; 
});