How to use flex-layout in nested components in angular 5?

问题

I am creating one application which has multiple components using parent child relationship in angular 5.

Inside my main app.component.html I have this structure.

        <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>

where this directive "app-layout-header" is responsible for loading side-navigation and top-navigation like this.

Now this directive "app-layout-view" is responsible for loading data-table or grid like this.

I want to use flex layout so that I can make it responsive and also I want final result like this.

But I am not sure how will I place the data-table exactly inside the place I wanted, that is below top-nav-bar and close to side menu. Currently it is coming below the whole side menu as you can see in the second image.

What Should I do now to get desired result?

来源：https://stackoverflow.com/questions/49083777/how-to-use-flex-layout-in-nested-components-in-angular-5