将 Flexbox 与多个 Angular 组件一起使用

Question

我目前正在尝试使用 Angular 构建一个项目，我使用 Semantic-UI。

我正在尝试在我的 AppComponent 中实现以下布局，其中我的 Header 和 Nav 是不同的组件，使用 flexbox：

我的 .html：

<div class="app">
  <div class="app-header">
    <ucecmp-header></ucecmp-header>
  </div>
  <div class="app-section">
    <div class="app-nav">
      <ucecmp-nav></ucecmp-nav>
    </div>
    <div class="app-content">
      <div class="ui huge header">Hello {{name}}</div>
    </div>
  </div>
</div>

还有我的 .css：

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-header {
  flex: 0 0 auto;
}

.app-nav {
  flex: 0 0 250px;
  order: -1;
}

.app-section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}

.app-content {
  flex: 1;
}

我的问题是我的导航和内容与标题重叠：

我对 flexbox 很陌生，所以问题可能很明显。任何人都可以帮忙吗？提前致谢。

Answer 1

我设法让它与以下 .css 一起工作：

.app {
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0;
}

.app-header {
  flex: 0 0 48px;
}

.app-nav {
  order: -1;
}

.app-section {
  display: flex;
  flex: 0 0 auto;
}

.app-content {
   flex: 1;
}