Как сделать два адаптивных столбца внутри содержимого mat-card с помощью fxLayout?

Question

Вот мой HTML фрагмент кода:

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

И CSS :

.mat-card-content {
    color: rgba(0, 0, 0, 0.700);
}

Мне нужно реализовать гибкие макеты внутриэлемент углового материала карты, так что две колонки будут реагировать и будут содержать некоторый текст, как в журнале:

На данный момент я сделал заголовок mat-card, и он работает правильно.Любой совет будет высоко ценится.

Answer 1

Попробуйте как ниже:

<div fxLayout="row" fxLayoutGap="10">
  <div fxFlex="50%">
 <p> first div </p>
  </div>
  <div fxFlex="50%">
      <p> second div </p>

    </div>
</div>

Answer 2

Если вы хотите адаптировать и для мобильных устройств, вы можете использовать flex-layout Отзывчивый 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>

Answer 3

попробуйте этот код, он работает так, как вы хотите

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

для лучшего понимания

https://stackblitz.com/edit/angular-sozro8?file=src%2Fapp%2Fapp.component.html