web-dev-qa-db-ja.com

Angular Flexレイアウト：行と列を組み合わせたレスポンシブレイアウト

私は学ぶ flex-layout 、そして私はレスポンシブなUIを作成しようとしています。私はbootstrapグリッドシステムで長年の経験がありますが、以下を実行する方法を理解できないようです（ ライブデモ ）：

大型モニターの場合： enter image description here

中型モニターの場合： enter image description here

モバイル：

enter image description here

私がそれを正しく理解している場合、以下のコードのように、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を組み合わせる方法がわかりません

htmlcssflexboxangular-flex-layout
7
Vingtoft

アイテムの配列をループしてコードを最小限に抑えます。そして、私はまっすぐxsに行くのではなくmdからsmに移行を変更しましたが、それはあなたの好みです。レイアウトのギャップも差し引いています（-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>
6
Nosheep

あなたはそのように試すことができます：

.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%
    }
}

あまり役に立たないので申し訳ありませんが、フレックス付きの速いヒントです。

ありがとう

3
Tsurule Vol