漂浮的行

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

这是一个带有这种情况的小型演员。

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

Answer 1

你需要从.contentBar div中删除高度，因为你应用了静态高度，数据是动态的。请更改style.css中的以下更改

.contentBar{
   margin-top: 1em;
   background-color: black;
   width: 30em;
 }

.content {
   color: red !important;
   font-weight:bold;
}

干杯老兄。

Answer 2

您可以使用CSS Flexbox：

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

Answer 3

如何实现这一目标的优雅方法是使用弹性盒。 请参阅更新后的pluncker here 。

关键是添加到contentBar的最后3条CSS规则：

.contentBar{
  margin-top: 1em;
  background-color: black;
  width: 30em;
  height: 5em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

可以在CSS tricks site找到非常好的弹性框指南。