html - Angular Flex 布局 : Responsive layout combining row and column

Question

我在学习 flex-layout ，并且我正在尝试创建响应式 UI。我有多年使用引导网格系统的经验，但我似乎无法理解如何完成以下操作(live demo):

在大型显示器上:

在中型显示器上:

在手机上:

如果我理解正确的话，我必须使用行和列的组合，就像下面的代码

    <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 示例。

问题:如何实现中型显示器的用户界面(见上图)？我无法理解如何组合 row 和 column

Answer 1

我会通过遍历元素数组来最小化您的代码。我改变了从 md 到 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>