スクリーンサイズに基づいて@角度/フレックスレイアウトラップを作る方法

Question

私は画面サイズに基づいて大きくまたは小さくすることができる3つのdivを持っていますが、ブートストラップのようにラップすることはできません。したがって、小さな画面では、divを縦に積み重ね、横に大きな画面を表示します。例：誰でもAngular2でこれをどうやって行うのか知っていますか？私は@ angle/flex-layoutを使用することを選択しました。

注：「色付きボックス」には何かが矛盾しているとは思われません。ここで

はあなたが異なる解像度でレイアウト形式を指定するためのfxLayout/fxLayout.xs属性を使用することができ

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    //templateUrl: './app/app.component.html', 
    template:` 

<div class="flex-container" fxFlex=100> 
     <div class="colored box" > 
     <div fxFlex.lg=100 fxFlex.md=50> flexible for screensize </div> 
     <div fxFlex.lg=100> fxFlex </div> 
     <div fxFlex=33> fxFlex </div> 
     </div> 
    </div> 
    <div class="version">@angular/flex-layout (v2.0.0-beta.0)</div> 
    `, 
    styleUrls: ['./app/app.component.css'] 
}) 
export class AppComponent { 

} 

Answer 1

...私のコードです。 fxLayoutは、column/rowのいずれかの値を受け入れることができます。

カラム：分割計算が垂直に行われます。

行：分割計算は水平方向に行われます。

あなたが任意の特定の解像度がちょうどfxLayout.xs="column"

<div class="flex-container" 
    fxLayout="row" 
    fxLayout.xs="column"> 
    <div class="flex-item" fxFlex=50> flexible for screensize </div> 
    <div class="flex-item" fxFlex=33> fxFlex </div> 
    <div class="flex-item" fxFlex=33> fxFlex </div> 
</div>