Angular Flex 布局 : Holy Grail Design

Question

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

|------------------------------------|
|              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%，但正如我们从下面屏幕截图中的蓝色边框看到的那样，它对此没有响应。

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

如果我将 home 组件上的 div 高度设置为 200px(高度:200px)，它会增长，但我需要它占据 app.component-html 上定义的父级的 100%。

不同的方法

我尝试不考虑 元素(类似的代码被带有“content”id 的 div 替换)，但结果是相同的:

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

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

任何人都可以发现和/或解释我做错了什么吗？这是一个好方法吗？有没有更好或更聪明的方法来做到这一点？

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

有人能给我举一个互联网上的例子吗？我找不到使用 Angular Flex 布局的。

谢谢

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”代替。 (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”的东西仍然很有用，它们非常简单。所以我基本上就是为了这个而保留 boostrap 的。