how to center align item using angular flex layout

Question

I am trying to build angular material application using angular flex layout mentioned at https://tburleson-layouts-demos.firebaseapp.com/#/docs , I have tried various combinations, but nothing is working for me. I am trying to build few cards under a toolbar which should take about 70% of the area, center align but they ended up using all space. My html is

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

If I add width:66% in css class it works, but why can't I do it with just fxFlex ?

As per manu suggestion.

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

also did not work

Answer 1

You missed % in fxFlex="66%" and also to center align add fxLayoutAlign="center center". First parameter in fxLayoutAlign is for main axis and second is for cross axis.