Angular应用中Flexbox布局问题求助

我正在尝试用Flexbox构建一个布局，理想的DOM结构是这样的：

<application>
  <flex-container>
    <page-content>
      <template-content>
      </template-content>
    </page-content>
  </flex-container>
</application>

这是我期望达到的结构。为了在我的Angular应用里实现它，我在app.component.ts里写了这样的布局代码：

<div class="application-body">
  <header></header>
  <div class="flex-container">
    <img class="background" src="assets/background.png" />
    <ion-app>
      <ion-router-outlet
        (ionNavWillChange)="playFadeInOutAnimation($event.target)"
      ></ion-router-outlet>
    </ion-app>
    <ng-toast></ng-toast>
  </div>
  <footer></footer>
</div>

对应的app.component.css目前写了这些样式：

.background {
  margin: 0;
  /* 这里还有其他未写完的样式 */
}

我现在遇到了布局上的问题，希望能得到大家的帮助，看看怎么调整才能匹配我想要的Flexbox布局结构。

备注：内容来源于stack exchange，提问作者Flávio Costa