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 的過渡，而不是直接到 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 的快速提示。

謝謝