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

【问题标题】：How to make @angular/flex-layout wrap based on screensize如何根据屏幕尺寸制作@angular/flex-layout wrap
【发布时间】：2017-06-14 20:46:22
【问题描述】：

我有 3 个 div，我可以根据屏幕大小将它们放大或缩小，但不能像 bootstrap 一样将其包裹起来。所以对于小屏幕，我希望 div 垂直堆叠，大屏幕水平堆叠。例如任何人都知道我是如何使用Angular2 做到这一点的吗？我选择使用我 npm 的@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  { 

}

【问题讨论】：

标签： html angular responsive-design

【解决方案1】：

尝试使用

fxLayout="行换行"

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

【讨论】：

【解决方案2】：

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

列：除法计算将垂直进行。

行：除法计算将横向进行。

如果您想定位任何特定的分辨率，请在后面提及 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>

【讨论】：

感谢 Pankaj...我正处于陡峭的学习曲线的起点，您能解释一下这是做什么的吗？
更新后...好吧，我想我明白了...似乎比 Bootstrap 复杂得多，它会根据屏幕大小自动包装组件。你能给我一些代码来实现我的大屏幕水平div和小屏幕垂直div吗？
@Fearghal 你可以查看网上的例子here，将窗口的分辨率改为小div后会垂直显示。
是的，我去了你给我的网站，看不到代码，例子很棒，所以一旦我看到他们的代码就会很有帮助
另外，您的代码在包装组件时起作用，但是它不像我的问题那样在屏幕上延伸，而是在左上角聚集在一起。如果您知道如何做到这一点，它就会得到回答。