如何使用 angular flex 布局居中对齐项目

Question

我正在尝试使用https://tburleson-layouts-demos.firebaseapp.com/#/docs 中提到的 angular flex 布局构建角度材料应用程序，我尝试了各种组合，但没有任何效果对我有用。我试图在工具栏下构建一些卡片，它应该占据大约 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> 

也没有用

Answer 1

您错过了 fxFlex="66%" 中的 % 并且要居中对齐添加 fxLayoutAlign="center center"。fxLayoutAlign 中的第一个参数用于主轴，第二个参数用于横轴。

Answer 2

此链接可能对您有帮助； 布局演示

编辑; 如果你的弹性方向是行，你可以将其居中（如果你也想垂直居中，请将“无”更改为“中心”）检查链接以获取有关弹性布局的更多信息。