Угловая динамическая высота строки - PullRequest
Новая
       7

Угловая динамическая высота строки

0 голосов
/ 28 июня 2018

Можем ли мы получить макет, как показано на рисунке ниже, с помощью angular flex-layout ? Нечто подобное происходит и с AngularJS - AngularJS Material

expected behaviour

1 Ответ

0 голосов
/ 28 июня 2018

Вы можете использовать список сетки из материала: https://material.angular.io/components/grid-list/overview
Но я думаю, что вы ищете более динамичный подход, при котором вам не нужно определять высоту самостоятельно. Этот вид макета называется «кладка» и может быть достигнут с помощью простого CSS, например:

HTML 

<div class="masonry-layout">
  <div class="masonry-layout__panel" *ngFor="let option of options">
    <div class="masonry-layout__panel-content">
      ...
    </div>
  </div>
</div>

CSS 

.masonry-layout {
    column-count: 2;
    column-gap: 0;
    margin: 8px;
}

.masonry-layout__panel {
    break-inside: avoid;
}

.masonry-layout__panel-content {
    padding: 8px;
    display: flex;
}

В качестве альтернативы, вы можете сделать это с FlexLayoutModule и определить столбцы следующим образом: 

<div fxLayout="row">
  <div class="column" fxFlex="50%>
    <div class="card">
    <div>
    <div class="card">
    <div>
  </div>
  <div class="column" fxFlex="50%>
    <div class="card">
    <div>
    <div class="card">
    <div>
  </div>
</div>
...