angular material2 应用程序中的 flex-sm 模拟

Question

这是适用于 angularjs material 的代码。

<div flex="50" flex-sm="100">
    Some data
</div>

如何在我的 Angular material 2 应用程序中实施它？

Answer 1

按照以下步骤使其正常工作：

1. 安装 flex-layout 依赖项：

   npm install @angular/flex-layout
   

2. 将 FlexLayoutModule 导入您的 AppModule:

   import { FlexLayoutModule } from '@angular/flex-layout';
   import { NgModule } from '@angular/core';
   
   @NgModule({
       imports: [
           FlexLayoutModule,
           // Other modules
       ]
   })
   export class AppModule {}
   

3. 将您的代码更改为以下内容：

   <div fxFlex="50%" fxFlex.sm="100%">
       Some data
   </div>
   

   • Flex layout demo website