如何根据屏幕尺寸制作@ angular/flex-layout wrap

Question

我有3个div,我可以根据屏幕尺寸做大或小,但不能让它像自举一样包裹.因此,对于小屏幕,我希望div垂直堆叠,水平大屏幕.例如任何人都知道我如何使用Angular2做到这一点？我选择使用我想要的@ angular/flex-layout.

注意:我不认为"彩色盒子"中有任何东西与任何东西相冲突.

这是我的代码......

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="行换行"

，它将元素移动到一个新行。它对我有用，在不同的屏幕尺寸上进行了测试。

Answer 2

您可以使用fxLayout/fxLayout.xs属性来指定不同分辨率的布局格式。哪里fxLayout可以接受column/row值。

column：除法计算将垂直发生。

行：除法计算将水平发生。

如果您想针对任何特定分辨率，请在 fxLayout 之后提及它，例如 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>