Question

假设我的＆＃34;主要＆＃34; 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的目的。

Stack snippet

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

注意，10中的/* 7 part(s) of 10 */是每组flex-grow / flex-shrink的总和。

Answer 2

这些组件的css是什么？您是否明确设置了flex-grow和flex-shrink？如果使用速记flex，我会使用：

flex: 0 0 10%;

此外，设置父容器（可能在您的情况下的主体，或应用程序根）以拉伸到100％高度：

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

angular2 - 使用flexbox设置组件的高度

2 个答案: