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链接：

您只需要使用包装 fxLayout="row wrap"

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

根据CSS Trick，flex-flow: row wrap做以下魔术：

  

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

PS：：当使用带有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>