角度灵活布局动态行高

时间:2018-06-28 12:57:39

标签: angular angular-material2 angular-flex-layout

angular flex-layout的帮助下,我们可以如下图所示进行布局吗? AngularJS也有类似的东西-AngularJS Material

expected behaviour

1 个答案:

答案 0 :(得分:0)

您可以使用以下材料的网格列表: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>