角度灵活布局动态行高

Question

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

Answer 1

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