角度弹性布局动态行高答案

【问题标题】：Angular flex-layout dynamic row height角度弹性布局动态行高
【发布时间】：2018-06-28 21:15:51
【问题描述】：

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

【问题讨论】：

标签： angular angular-material2 angular-flex-layout

【解决方案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>

【讨论】：

第一个解决方案是给我想要的结果。但我想让列从左到右而不是从上到下流动。这是类似的问题 - stackoverflow.com/questions/14925157/… 我们可以让列从左向右流动吗？