flex 容器和 ngIf 水平居中答案

【问题标题】：flex container and ngIf center horizontallyflex 容器和 ngIf 水平居中
【发布时间】：2018-07-13 18:49:16
【问题描述】：

我有一个 flex 容器和一些可以使用 ngIf 添加或删除的元素。

我希望另一个元素始终可见，水平居中，底部还有一个固定元素，例如：

在蓝色部分，我将根据 ngIf 条件有不同的元素：

<div fxFlexFill fxLayout="column">

  <element1 fxFlex *ngIf="element === '1'">
  </element1>

  <element2 fxFlex *ngIf="element === '2'">
  </element2>

 <element3 fxFlex *ngIf="element === '3'">
  </element3>

  <!-- fixed element center -->

  <div class="center">
  </div>

   <!-- fixed element at bottom -->
   <div fxLayout="row" fxFlex="30px">

  </div>

.center {   
  background-color: yellow;
  display: flex;
  justify-content: center;
 }

我该怎么做？

【问题讨论】：

能否附上小提琴链接...使用 align-items: center;

标签： angular css flexbox

【解决方案1】：

对于您希望始终可见的元素，请应用：

位置：绝对

橙色元素使用

底部：0;

对于黄色

使用权:0,top:50%;

如果您想了解更多详细信息，请发布相同的小提琴

【讨论】：

【解决方案2】：

您在使用黄色元素时遇到的问题是，在您的样式中，您将其视为 flexbox 父/容器元素，而您实际上希望将其视为其父元素的子元素。

将以下内容添加到父 div 应该使黄色框居中：

<div fxFlexFill fxLayout="column" fxLayoutAlign="center center">

但是，您将遇到的另一个问题是，当您以编程方式添加其他元素时，它们将与黄色 div 一起流动。根据您想要在布局方面实现的目标，您可能需要重新考虑您想要布置元素的方式，尽管从您的帖子中不清楚当附加元素是如何布置这些元素时添加到页面。

【讨论】：