html – 如何基于屏幕大小制作@ angularflex-layout wrap

概述我有3个div,我可以根据屏幕尺寸做大或小,但不能让它像自举一样包裹.因此,对于小屏幕,我希望div垂直堆叠,水平大屏幕.例如 任何人都知道我如何用Angular2做到这一点？我选择使用我想要的@ angular / flex-layout. 注意：我不认为“彩色盒子”中有任何东西与任何东西相冲突. 这是我的代码…… import { Component } from '@angular/core 我有3个div,我可以根据屏幕尺寸做大或小,但不能让它像自举一样包裹.因此,对于小屏幕,我希望div垂直堆叠,水平大屏幕.例如

任何人都知道我如何用Angular2做到这一点？我选择使用我想要的@ angular / flex-layout.

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

这是我的代码……

import { Component } from '@angular/core';@Component({  selector: 'my-app',//templateUrl: './app/app.component.HTML',template:`<div  fxFlex=100>      <div  >        <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 >@angular/flex-layout (v2.0.0-beta.0)</div>  `,styleUrls: ['./app/app.component.CSS']})export class AppComponent  { }

解决方法 您可以使用fxLayout / fxLayout.xs属性指定不同分辨率的布局格式.其中fxLayout可以接受列/行值.

column: division calculation will happen vertically.

row: division calculation will happen horizontally.

If you want to target any specific resolution mention it just after
fxLayout like fxLayout.xs="column"

<div       fxLayout="row"      fxLayout.xs="column">  <div  fxFlex=50>  flexible for screensize  </div>  <div  fxFlex=33> fxFlex </div>  <div  fxFlex=33> fxFlex </div></div>

总结

以上是内存溢出为你收集整理的html – 如何基于屏幕大小制作@ angular / flex-layout wrap全部内容，希望文章能够帮你解决html – 如何基于屏幕大小制作@ angular / flex-layout wrap所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。