Angular 如何使用角度柔性布局将项目居中对齐

我正在尝试使用中提到的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>

Flex布局示例
样本卡

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

按照马努的建议

<!--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> 

Flex布局示例
样本卡

---

也不起作用

您在fxFlex=“66%”中漏掉了%，并且添加了fxLayoutAlign=“center-center”以居中对齐。FXLAYOUTALING中的第一个参数用于主轴，第二个参数用于横轴。

此链接可能对您有所帮助；

---

编辑；如果弯曲方向为行，则可以将其居中（如果要垂直居中，则将“无”更改为“居中”），查看链接以了解有关弯曲布局的更多信息

这个问题有什么问题吗？我试过使用%符号和居中符号，但不起作用