在多个Angular组件中使用Flexbox

Question

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

我想实现我的AppComponent，我的头和导航是不同的组件如下的布局，使用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; 
} 

我的问题是t帽子我看到我的资产净值和内容重叠我的头：

我很新了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; 
}