Строки, которые плавают вверх

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

Эти данные отображаются на topbar, который имеет ограниченную высоту, таким образом, не будучи в состоянии соответствовать всему массиву данных.

<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

Вы можете использовать CSS Flexbox:

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

Answer 2

вам нужно удалить высоту от .contentBar DIV, потому что вы применили статическую высоту и данные поступают динамически. Пожалуйста, измените ниже изменения в вашем стиле.css

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

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

Cheers dude.

Answer 3

Элегантный способ, как добиться этого заключается в использовании гибкой коробки. См. Обновленный pluncker here.

Ключ Последние 3 правила CSS, которые были добавлены в contentBar:

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

Очень хорошее руководство для гибкой коробки можно найти на CSS tricks site.