使用 @angular/flex-layout 作为网格布局

Question

我正在尝试创建一个网格布局，例如使用 Angular 团队提供的 flex-layout。

这就是我想要的：

这就是我所拥有的：

我正在尝试仅使用具有wrap 参数的一行来执行此操作，因此更灵活：

<div class="widgets-row"
 fxLayout
 fxLayout.xs="column"
 fxLayoutAlign="start"
 fxLayoutWrap="wrap">
<div class="widget" fxFlex="100%">Large</div>
<div class="widget" fxFlex="50%">Medium</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>

基本上我需要最后一行包裹在另外两个“小”下面。

谢谢。

Answer 1

我设法通过创建几种布局来做到这一点，一种用于大型小部件，一种用于中型小部件，一种用于小型小部件：

<div class="widgets-row"
    fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="start"
    fxLayoutWrap="wrap">
    <div class="widget" fxFlex="100%">Large</div>
</div>

<div fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="space-between"
    fxLayoutWrap="wrap">
    <div fxFlex="49%" class="widget"></div>
    <div fxLayout
        fxLayout.xs="column"
        fxLayoutWrap="wrap"
        fxLayoutAlign="space-around"
        fxFlex="49%">
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
    </div>
</div>

PS：第二个布局中 49% 的 Flex 是为了在小部件之间留出一些空间，以免它们粘在一起。