我认为基于 Angular 6 创建简历会很好。您可以为简历的每个部分创建单独的组件。例如，一个用于您的个人资料，一个用于您的教育，一个用于您的投资组合等。我使用Angular flexLayout构建了其中的每一个。单独来看，它们看起来不错，但是当我将它们堆叠在app.component中时.html文本/图像重叠。
我创建了一个简单的堆栈闪电战来演示这一点。
https://stackblitz.com/edit/angular-material-flex-layout-seed-wzzmnn?file=app%2Fapp.component.html
您已在子组件 fxLayout="column" 中声明，并在父组件中使用相同的组件。只需删除子组件上的声明
https://stackblitz.com/edit/angular-material-flex-layout-seed-4nkkyu?file=app/education/education.component.html
它与组件的高度有关。
这是一个非常常见的 CSS 问题。将 flex 布局视为浮动布局：元素从要放置的文档流中出来，它们依赖于容器的宽度和高度。
通过固定容器的高度，可以解决问题。
在您的情况下，容器应占其自身容器高度的 100%：
<div fxLayout="column" [style.height]="'100%'">
并且您需要设置此容器的容器高度(不要迷路！
html, body {
height: 100%;
}
这给出了您应该期待的结果(无论如何，我希望如此(