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

Question

我正在尝试使用 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> 

也没有用

Answer 1

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