javascript - 漂浮的行

我正在使用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个以上可见的数据实例，则最后两个应放在该行右侧​​的另一个垂直行中。

这是这种情况下的一个小样机。

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

最佳答案

您可以使用CSS Flexbox：

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