如何在角度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下方并靠近侧边菜单.目前,它位于整个侧面菜单的下方,您可以在第二张图片中看到.

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