how to center align item using angular flex layout

4
votes

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

2
angularangular-flex-layout
was anything wrong with the question ? – Ashish

2 Answers

9
votes

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.

3
votes

this link could be helpful for you; layouts-demos

edit; if your flex-direction is row you could center it like (change "none" to "center" if you want to center vertically too) Check the link for more informations about flex layout.