如何在角度5中的嵌套组件中使用flex-layout？

Question

我正在使用angular 5中的父子关系创建一个具有多个组件的应用程序。

在我的主app.component.html中，我有这个结构。

        <app-layout-header></app-layout-header>
           <app-layout-view></app-layout-view>
           <app-layout-add></app-layout-add>

           <router-outlet></router-outlet>

        <app-layout-footer></app-layout-footer>

这个指令“app-layout-header”负责加载侧导航和顶部导航。

现在这个指令“app-layout-view”负责像这样加载数据表或网格。

我想使用flex布局，以便我可以使它响应，我也想要这样的最终结果。

但我不确定如何将数据表准确放置在我想要的位置，即位于top-nav-bar下方并靠近侧边菜单。目前，它位于整个侧面菜单的下方，您可以在第二张图片中看到。

我现在该怎么办才能得到理想的结果？