javascript - 使用 flexbox 显示数据

Question

我使用 flexbox 并循环遍历数据集并打印出数据。

我的代码是:

<div ng-app="myapp" ng-controller="FirstCtrl">

    <div ng-repeat="name in names" class="graph-wrapper">
        <div class="aside-1 content">
            {{name.first}}
        </div>

        <div class="graph-main content">
            {{name.address}}
        </div>
    </div>
</div>

和 Controller :

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' }
    ];
});

还有 CSS:

.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 > * {
    flex: 1 50%;
    order: 1;
}

.graph-main {
  flex: 12 0px; 
}

.aside-1 { 
  flex: 1; 
}

.content {
  border: 1px grey solid;
}

但是我最终得到的是这样的:

但是，我希望它看起来像这样(数据的顺序并不重要):

是否可以在一个循环中执行此操作？

这个 fiddle 是 here .

Answer 1

您还可以将主容器设置为 flex-box : https://codepen.io/gc-nomade/pen/aWBxPV

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'
    }
  ];
});

.flex {
  display: flex;
  flex-wrap: wrap;
}

.graph-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 50%;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.graph-wrapper>* {
  flex: 1 50%;
  order: 1;
}

.graph-main {
  flex: 4;
}

.aside-1 {
  flex: 1;
}

.content {
  border: 1px grey solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myapp" ng-controller="FirstCtrl" class="flex">

  <div ng-repeat="name in names" class="graph-wrapper">
    <div class="aside-1 content">
      {{name.first}}
    </div>

    <div class="graph-main content">
      {{name.address}}
    </div>
  </div>
</div>