Question

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

|------------------------------------|
|              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 =“ start Stretch”而不是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。（Documentation）

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

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

确实使用这两者不一定很好，尤其是如果您在Flex-Layout中将引导程序“ col”与“ flex”一起使用时，但是一些引导程序仍然可以用作“ margin”或“ padding”非常简单。所以我基本上为此保留boostrap。

Angular Flex布局：圣杯设计

1 个答案: