将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;
}