Menu
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
351
The fxLayoutGap directive should be used on to specify margin gaps on children within a flexbox container (e.g. nested within a fxLayout container). There is a secondary mode to enable a gutter system with a margin applied on the host element.
fxFlex is one of the most useful and powerful APIs in Angular Flex Layout. It must be used on children elements inside the fxLayout container. It is responsible for resizing elements along the main-axis of the layout. <div fxLayout="row" fxLayoutAlign="start center">
fxLayout is a directive used to define the layout of the HTML elements. i.e., it decides the flow of children elements within a flexbox container. fxLayout should be applied on the parent DOM element i.e., flexbox container. And fxLayout directive case sensitive.
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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
