时间戳

首页 > 解决方案 > flex 容器和 ngIf 水平居中

angular - flex 容器和 ngIf 水平居中

问题描述

我有一个 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;
 }

我该怎么做？

标签： angularcssflexbox

解决方案

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

立场：绝对

对于橙色元素使用

底部：0；

和黄色

使用权：0，上：50%；

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

推荐阅读