Angular Flex布局：响应式布局，结合了行和列

Question

我正在学习flex-layout，我正在尝试创建一个响应式UI。我在引导网格系统方面有多年的经验，但似乎无法理解如何完成以下工作（实时演示）：

在大型显示器上：

在中型显示器上：

在移动：

如果我理解正确的话，我必须使用的组合rows和columns，如下面的代码

    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
   </div>

在小屏幕上，布局从更改row为column，这意味着我已经为大型和移动显示器实现了上面的UI示例。

问题：如何为中型监视器实现UI（请参见上图）？我不明白如何结合row和column

Answer 1

我将通过遍历项目数组来最小化您的代码。我将md的过渡从sm改为sm，而不是直接过渡到xs，但这是您的偏爱。我也在减去布局间隙（-0.5％）。

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
 <ng-container *ngFor="let item of items">
    <li
      fxFlex="0 1 calc(25% - 0.5%)"
      fxFlex.lt-md="0 1 calc(50% - 0.5%)"
      fxFlex.lt-sm="100%">
   </li>
</ng-container>
   </div>

Answer 2

你可以这样尝试：

    .container { // for desktop & tablet
        display: flex;
        flex-flow: row wrap;
    }
    
    .container div {
        width: 25%
    }
    
    @media for middle { // for tablet (mid)
        .container div {
            width: 50%
        }
    }
    
    @media for mobile { //for mobile
        .container {
            flex-direction: column;
        }
    
        .container div {
            width: 100%
        }
    }

希望它能有所帮助，很抱歉没有那么详细，但这只是一个关于 Flex 的快速提示。

谢谢