How to make two responsive columns inside the mat-card-content using fxLayout?
13,141
Solution 1
Try like below :
<div fxLayout="row" fxLayoutGap="10">
<div fxFlex="50%">
<p> first div </p>
</div>
<div fxFlex="50%">
<p> second div </p>
</div>
</div>
Solution 2
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
Solution 3
If you want responsive for mobile device also, you can use flex-layout Responsive API.
<mat-card-content>
<div fxLayout.gt-sm="row" fxLayout="column" fxLayoutGap="16px">
<div fxFlex.gt-sm="50%" fxFlex>
First div
</div>
<div fxFlex.gt-sm="50%" fxFlex>
Second div
</div>
</div>
</mat-card-content>
![A. Isakau](https://i.stack.imgur.com/rYUMH.jpg?s=256&g=1)
Author by
A. Isakau
Updated on June 13, 2022Comments
-
A. Isakau about 2 years
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.