Here is my HTML code snippet:
<mat-card-content>
<div fxLayout="row" fxFlex="1 0 0">
<div fxLayout="column">First</div>
<div fxLayout="column" style="margin-left:auto">Second</div>
</div>
</mat-card-content>
And CSS:
.mat-card-content {
color: rgba(0, 0, 0, 0.700);
}
I need to implement flex layouts inside the angular material card element so that two columns will responsive and will contain some text like in the magazine:
At this moment I have done mat-card-header and it's working right. Any advice will be much appreciated.
you have try this code its working as you want
<mat-card-content>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
<div fxLayout="column">First</div>
<div fxLayout="column">Second</div>
</div>
</mat-card-content>
for better understanding
https://stackblitz.com/edit/angular-sozro8?file=src%2Fapp%2Fapp.component.html