Angular Flex 布局：圣杯设计

Question

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

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

以下是代码

应用程序组件.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>

应用组件.css

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

主页.component.html

<div>
  home works!
</div>

主页.component.css

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

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

home-component div 按预期插入元素，没有任何样式。但这不应该影响子元素的任何内容。

如果我将主页组件上的 div 高度设置为 200 像素（高度：200 像素），它会增长，但我需要它占据 app.component-html 上定义的父级的 100%。

不同的做法

我试着不考虑 < router-outlet > 元素（类似的代码被一个带有“content”id 的 div 代替）但结果是一样的：

应用组件.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 与“内容”ID 居中，但它不会占据其父级高度的 100%，如下图所示：

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

谁能发现和/或解释我做错了什么？这是一个好方法吗？有没有更好或更聪明的方法来做到这一点？

我正在使用官方文档 https://github.com/angular/flex-layout/wiki/fxFlex-API

有人可以指出我在互联网上的一个例子吗？我找不到一个使用 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。（文档）

我看到您正在使用“ fxFlexAlign”，但我认为 Flex-Layout 不存在。您必须使用“ fxLayout”和“ fxLayoutAlign”放入列或在线。这是一个对 Flex-Layout 帮助很大的网站（Angular Flex-Layout Demos）

实际上我正在从应用程序中删除 Bootstrap 因为我使用的是 Angular Material 并且觉得混合它们不是一件好事

确实，同时使用两者并不一定很好，尤其是当您使用Flex-Layout的引导程序“ col”和“ flex”时，但是一些引导程序的东西仍然有用，用作“ margin”或“ padding”，它们非常简单。所以我基本上为此保留了boostrap。