Angular Flex-layout与Tabs布局可以通过以下步骤来实现：

1. 首先，确保已经安装了Angular Flex-layout库。可以通过以下命令安装：

npm install @angular/flex-layout --save

2. 在Angular项目的模块中导入Flex-layout库。打开app.module.ts文件，并添加以下代码：

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    // ...
    FlexLayoutModule
  ],
  // ...
})
export class AppModule { }

3. 创建一个Tabs组件，用来显示不同的选项卡内容。在组件的HTML模板中使用Flex-layout布局，并使用fxLayout、fxFlex和fxHide指令来设置布局和隐藏选项卡。

  
    
      

        
Tab 1 Content
      
    
    
      

        
Tab 2 Content
      
    
    
      

        
Tab 3 Content
      
    
  

4. 在组件的CSS文件中，可以使用Flex-layout的响应式布局来调整选项卡的显示方式。例如，可以在较小的屏幕上将选项卡垂直排列，而在较大的屏幕上将选项卡水平排列。以下是一个示例：

@media only screen and (max-width: 600px) {
  .mat-tab-group {
    flex-direction: column;
  }
}

5. 最后，将Tabs组件添加到应用中的其他组件中。在父组件的HTML模板中添加以下代码：

这样，你就可以在Angular应用中使用Flex-layout和Tabs布局了。通过使用Flex-layout的指令和属性，可以轻松地创建响应式的布局。