title: Using flexbox to display data
body: <p>Im using flexbox and looping through dataset and printing out the data. </p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;div ng-app="myapp" ng-controller="FirstCtrl"&gt;
  
      &lt;div ng-repeat="name in names" class="graph-wrapper"&gt;
          &lt;div class="aside-1 content"&gt;
              {{name.first}}
          &lt;/div&gt;
  
          &lt;div class="graph-main content"&gt;
              {{name.address}}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And controller:</p>
  
  <pre><code>var myapp = angular.module('myapp', []);
  myapp.controller('FirstCtrl', function ($scope) {
      $scope.names = [
          { id: 1, first: 'John', address: 'xxxxxxxxxxxxx' },
          { id: 2, first: 'Rocky', address: 'yyyyyyyyyyyyyy' },
          { id: 3, first: 'John', address: 'ttttttttttttttt' },
          { id: 4, first: 'Ben', address: 'pppppppppppppppp' }
      ];
  });
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.graph-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  
  .graph-wrapper &gt; * {
      flex: 1 50%;
      order: 1;
  }
  
  .graph-main {
    flex: 12 0px; 
  }
  
  .aside-1 { 
    flex: 1; 
  }
  
  .content {
    border: 1px grey solid;
  }
  </code></pre>
  
  <p>However I end up with something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/PLYE1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PLYE1.png" alt="enter image description here"></a></p>
  
  <p>However, I want it to look like this (order of data isn't important):</p>
  
  <p><a href="https://i.stack.imgur.com/zvEI3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvEI3.png" alt="enter image description here"></a> </p>
  
  <p>Is it possible to do this in one loop?</p>
  
  <p>This fiddle is <a href="http://jsfiddle.net/onanwswt/" rel="nofollow noreferrer">here</a>.</p>