'How to make two responsive columns inside the mat-card-content using fxLayout?

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: img

At this moment I have done mat-card-header and it's working right. Any advice will be much appreciated.

htmlcssangularangular-materialangular-flex-layout


Solution 1:[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>

2022 update :

Stackblitz demo

Solution 2:[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:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Imrul Islam

Related Questions