Angular flexLayout 组件重叠答案

【问题标题】：Angular flexLayout components overlapAngular flexLayout 组件重叠
【发布时间】：2019-01-26 10:30:41
【问题描述】：

我认为基于 Angular 6 创建简历会很好。您可以为简历的每个部分创建单独的组件。例如，一个用于您的个人资料，一个用于您的教育，一个用于您的投资组合等。我使用 Angular flexLayout 构建每一个。单独它们看起来不错，但是当我将它们堆叠在 app.component.html 中时，文本/图像会重叠。

我创建了一个简单的 stackblitz 来演示这一点。

https://stackblitz.com/edit/angular-material-flex-layout-seed-wzzmnn?file=app%2Fapp.component.html

【问题讨论】：

标签： angular angular6 angular-flex-layout

【解决方案1】：

您已在子组件中声明 fxLayout="column" 并在您的父组件中使用相同的内容。只需删除子组件上的声明

https://stackblitz.com/edit/angular-material-flex-layout-seed-4nkkyu?file=app/education/education.component.html

【讨论】：

非常感谢。这也有效。我可以将简历标题、关于我、教育放在 app.component.html 中，并将它们用作组件选择器的标记。

【解决方案2】：

这与组件的高度有关。

这是一个非常常见的 CSS 问题。将 flex 布局视为浮动布局：元素正在脱离要放置的文档流，它们依赖于容器的宽度和高度。

通过固定容器的高度，您可以解决问题。

在您的情况下，容器应占其自身容器高度的 100%：

<div fxLayout="column" [style.height]="'100%'">

你需要设置这个容器的容器高度（不要迷路！）

html, body {
  height: 100%;
}

这给了the result you should be expecting（无论如何我希望如此）

【讨论】：

这是一个巨大的帮助。我真的被困住了。现在多亏你我可以搬家了
我刚刚注意到，当我缩小宽度以表示 iPhone 7 尺寸时，即使我使用的是 Angular flexLayout，我也会再次遇到合并问题。
我使用
您也可以将其声明为fxLayout="row wrap"，以便组件转到新行而不是重叠。
不明白。我正在使用 fxLayout="column" 以便组件可以堆叠。我怎样才能使用 fxLayout="row wrap" ？哦，对不起，是的，您的意思是组件本身。优秀。谢谢