Angular FlexLayout 自定义布局

Question

我正在尝试创建一个布局，类似于通过仪表板的角度材料示意图完成的布局，但使用角度 flexlayout。

仪表板示例

目前为止：

<div fxFlex="66" fxFlexOffset="15" fxLayout="row" fxLayoutGap="0.5%">
      <div fxFlex="100%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
</div>

这会导致：

我一直在努力想办法。

Answer 1

这是您正在尝试做的事情的stackblitz 链接：

你只需要使用 wrap fxLayout="row wrap"

附加的 wrap 值告诉 Flex 布局将 flex-flow: row wrap 添加到您的 flex 容器中。

按照CSS Trick、flex-flow: row wrap 执行以下魔法：

它定义了弹性项目是强制在单行还是可以流入多行。如果设置为多条线，它还定义了确定新线堆叠方向的横轴。

PS：当使用 wrap 和 fxLayout 来换行或列时，您应该在指定子项大小时考虑间隙大小（使用 fxFlex）。

Answer 2

你有两行，所以你需要将它们分成两个不同的div（你可以从你的属性中删除%）：

<div fxLayout="row" fxLayoutGap="15px">
  <div fxFlex="100">
    <mat-card>
      // content
    </mat-card>
  </div>
</div>
<div fxLayout="row" fxLayoutGap="15px">
  <div fxFlex="50">
    <mat-card>
      // content
    </mat-card>
  </div>
  <div fxFlex="50">
    <mat-card>
      // content
    </mat-card>
  </div>
</div>