alee046 alee046 - 3 months ago 39
CSS Question

using ng-repeat with google materials flex box (with wrap?)

I am trying to create a 2 by 2 grid iterating with

and using the flex box. I have seen some examples where
attribute would produce the effect I want, but I haven't been able to get the flex-widths to work correctly. The following is the mark down I have, with screenshots for wide, and mobile view, respectively. I am trying to get the wide view to render a 2x2 box.

<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> -- wide-view -- mobile-view


Is this the kind of thing you want? CodePen

enter image description here


<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 style="background:grey" flex="10"></div>



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