javascript - 浮起来的行

Question

我正在使用 Angular 创建一个复选框列表，用于定义某些数据是否可见。

  $scope.data = [
  {name: "Data1", shown: true},
  {name: "Data2", shown: true},
  {name: "Data3", shown: true},
  {name: "Data4", shown: true},
  {name: "Data5", shown: true},
  {name: "Data6", shown: true}
  ];

此数据显示在高度有限的顶栏上，因此无法容纳整个数据数组。

<div class="contentBar">
  <div class="content" ng-repeat="item in data" ng-if="item.shown">{{item.name}}</div>
</div>

我想要实现的是:如果有超过 4 个可见的数据实例，最后两个应该放在另一个垂直行中，在该行的右侧。

这是一个关于这种情况的小型演示 plunker。

http://plnkr.co/edit/vVysWYR5FLzIBh8zP8th?p=preview

Answer 1

您可以使用 CSS Flexbox:

.contentBar {
    display: flex;
    flex-flow: column wrap;
}