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

Question

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

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

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

var a = new A();
// push some childs to a.children
a.getChildrenOfType(B)

Answer 1

您可以使用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> 

Answer 2

尝试使用

  

fxLayout =“行包装”

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