html - 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 的一部分可用空间，此处设置为全视口(viewport)高度。

flex-basis 设置为 0，因此内容不会影响元素之间的空间分配方式。

它会保持元素的 10%/70%/20% 比例，但是 header/footer 仍然可以根据需要调整高度，哪种of 是使用 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 */ 是每组 flex-grow 的总和/flex-shrink.