Angular 弹性布局：圣杯设计

Question

我正在尝试使用 Angular Flex Layout 创建一个简单的页面。（实际上我正在从应用程序中删除 Bootstrap 因为我正在使用 Angular Material 并且觉得混合它们不是一件好事）。我的目标是使用 "Holy Grail Layout" 通过页眉、内容和页脚设置主页。

|------------------------------------|
|              Header                |
|------------------------------------|
|                                    |
|              Content               |
|                                    |
|------------------------------------|
|              Footer                |
|------------------------------------|

代码如下

app.component.html

<div class="main-container" fxLayout="column">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

app.component.css

.main-container {
  min-height: 100vh;
  border:1px solid black;
}

home.component.html

<div>
  home works!
</div>

home.component.css

div {
  margin: 1px 0px 1px 0px;
  padding: 1px;
  border: 1px solid blue;
  height: 100%;
}

我原以为 home 组件会占据父组件的 100% 高度，但正如我们在下方屏幕截图中的蓝色边框所见，它没有对此做出响应。

主页组件 div 由 angular 插入，元素符合预期，没有任何样式。但这不应该影响子元素。

如果我将 home-component 的 div 高度设置为 200px（高度：200px），它会增长，但我需要它占据 [=84= 上定义的父级的 100% ]-html.

不同的方法

我试着不考虑 < router-outlet > 元素（类似的代码被替换为 div 和 "content" id）但结果是一样的：

app-component.html

<div class="main-container" fxLayout="column" fxLayoutAlign="start stretch">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
      <div id="content" fxFlex fxFlexAlign="stretch" fxLayout="row" fxLayoutAlign="start center" style="height: 100%">
        <div fxFlex="auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 1
        </div>

        <div fxFlex="4 0 auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 2
        </div>
      </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

最好的实现是将 div 与 "content" ID 居中，但它不会占据其父级高度的 100%，如下图所示：

我期待 "content" div 上的 fxFlexAlign="stretch" 甚至 fxLayoutAlign="start stretch" 而不是 fxLayoutAlign="start center" 会强制它占据100%的高度。

谁能发现 and/or 解释一下我做错了什么？这是一个好方法吗？有更好或更聪明的方法吗？

我用的是官方文档 https://github.com/angular/flex-layout/wiki/fxFlex-API

谁能给我指出 Internet 上的示例？我找不到使用 Angular Flex Layout 的。

谢谢

Answer 1

好的，我尝试在 Stackblitz 上重现您的问题，结果如下：Stackblitz HERE

app.component.html :

<div fxFlexFill fxLayout="column" style="padding: 5px">
  <div fxFlex="none" style="border:2px solid black;">
    <app-header></app-header>
  </div>

    <div fxFlex style="border:2px solid black;">
      <router-outlet></router-outlet>
    </div>

  <div fxFlex="none"style="border:2px solid black;">
    <app-footer></app-footer>
  </div>
</div>

home.component.html :

<div fxFill fxLayout="row">
  <div fxFlex style="border: 1px solid blue; padding: 2px">
    col 1
  </div>

  <div fxFlex="70" style="border: 1px solid blue; padding: 2px">
    col 2
  </div>
</div>

演示：

所有这一切都是通过 Flex-Layout 完成的。希望对您有所帮助。

PS: 你应该注意不要改变高度，这可能是 Flex-Layout 的问题。使用“fxFlex”、“fxFill”或“fxFlexFill”instead。 (Documentation)

我看到您使用的是“fxFlexAlign”，但我认为它不存在于 Flex-Layout 中。您必须使用“fxLayout”和“fxLayoutAlign”来放入专栏或在线。这是一个对 Flex-Layout 帮助很大的网站 (Angular Flex-Layout Demos)

Actually a I am removing Bootstrap from the application because I am using Angular Material and feel that mixing them is not a good thing

确实两者都用不一定很好，特别是如果你用Flex-Layout的bootstrap“col”和“flex”，但有些bootstrap 作为“margin”或“padding”使用仍然有用，它们非常简单。所以我基本上为此保留了助推器。

Angular 弹性布局：圣杯设计

Angular Flex Layout: Holy Grail Design

angular

angular-flex-layout