时间戳

首页 > 解决方案 > 如何使用角度弹性布局居中对齐项目

angular - 如何使用角度弹性布局居中对齐项目

问题描述

我正在尝试使用https://tburleson-layouts-demos.firebaseapp.com/#/docs中提到的 angular flex 布局构建 angular material 应用程序，我尝试了各种组合，但没有任何东西对我有用。我正在尝试在工具栏下构建几张卡片，它们应该占据大约 70% 的区域，居中对齐，但它们最终使用了所有空间。我的html是

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

如果我在 css 类中添加 width:66% 它可以工作，但为什么我不能只使用 fxFlex 呢？

按照manu的建议。

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66%" fxLayoutAlign="center center">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

也没有工作

标签： angularangular-flex-layout

解决方案

您错过了 fxFlex="66%" 中的 % 以及居中对齐添加 fxLayoutAlign="center center"。fxLayoutAlign 中的第一个参数用于主轴，第二个参数用于交叉轴。

推荐阅读