angular2-使用flexbox設置組件的高度

Question

假設我的“主要” app.component.html中只有三行代碼：

<app-header-component></app-header-component>
<app-content-component></app-content-component>
<app-footer-component></app-footer-component>

在這里我希望頁眉組件占據屏幕的大約10％，對於內容具有70％的內容，對於頁腳-20％，使用flexbox布局，並且此大小不應更改相應組件中的內容量。 我嘗試自己添加flexbox，但是比率發生變化，尤其是對於<app-content-component> 。 我認為問題在於<app-content-component>內部具有多個嵌套組件，這就是為什么我需要的比率不會保持相同的原因。

Answer 1

設置類似內容的最簡單方法是使用flex-grow / flex-shrink ，其中它們獲得可用空間的n部分，此處設置為全視口高度。

flex-basis設置為0因此內容不會影響項目之間空間的分配方式。

它將保留項目的10％/ 70％/ 20％比率，但是頁眉 / 頁腳都可以根據需要調整高度，這是使用Flexbox的目的。

堆棧片段

 body { margin: 0; } my-container { display: flex; flex-direction: column; height: 100vh; } app-header-component { flex: 1 1 0; /* 1 part(s) of 10 */ background: lightblue; } app-content-component { flex: 7 7 0; /* 7 part(s) of 10 */ background: lightgreen; overflow: auto; } app-footer-component { flex: 2 2 0; /* 2 part(s) of 10 */ background: lightblue } 

 <my-container> <app-header-component> Header </app-header-component> <app-content-component> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> Content with many lines<br> </app-content-component> <app-footer-component> Footer </app-footer-component> </my-container> 

---

請注意， 10英寸（即/* 7 part(s) of 10 */是每個set flex-grow / flex-shrink的總和。

Answer 2

您對這些組件的要求是什么？ 您是否明確設置了flex-grow和flex-shrink？ 如果使用速記flex，我將使用：

flex: 0 0 10%;

另外，將父容器（可能是您的身體，或應用程序根目錄）設置為拉伸到100％的高度：

app-root {
  min-height: 100vh;
}