如何在mat-card-header中向左右設置元素組？

Question

我需要在左側和右側設置標題元素組。

我有這樣的事情：

<mat-card-header>

      <div fxLayout="row">

        <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
          <div>Alex Isakau</div>
          <a href="https://www.twitter.com/alexisakau">
            <img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
          </a>
          <a href="https://www.linkedin.com/in/alexisakau/">
            <img alt="in" src="../../assets/img/linked.png" width="40" height="40">
          </a>
        </div>

        <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
          <div>about</div>
          <div>portfolio</div>
          <div>contact</div>
        </div>

      </div>
    </mat-card-header>

以及與mat-card-header相關的CSS：

.mat-card {
   padding: 0;
}

.mat-card-header {
  background-color: rgb(42, 5, 128);
  color: white;
  padding: 25px 5px 25px;
}

添加fxLayoutGap之后：

<mat-card-header>
      <div fxLayout="row" fxLayoutGap="120%">

就像我說的，它沒有反應

Answer 1

您可以通過使包裝器div fxLayoutAlign'space-between'來完成此操作

   <mat-card-header>
     <div fxLayout="row" fxFlex="1 0 0" fxLayoutAlign="space-between">
        <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
            <div>Alex Isakau</div>
            <a href="https://www.twitter.com/alexisakau">
                <img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
            </a>
            <a href="https://www.linkedin.com/in/alexisakau/">
               <img alt="in" src="../../assets/img/linked.png" width="40" height="40">
            </a>
      </div>
      <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
        <div>about</div>
        <div>portfolio</div>
        <div>contact</div>
      </div>
    </div>
  </mat-card-header>

要么

給margin-left: auto移至要向右移動的div

   <mat-card-header>
     <div fxLayout="row" fxFlex="1 0 0">
        <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
            <div>Alex Isakau</div>
            <a href="https://www.twitter.com/alexisakau">
                <img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
            </a>
            <a href="https://www.linkedin.com/in/alexisakau/">
               <img alt="in" src="../../assets/img/linked.png" width="40" height="40">
            </a>
      </div>
      <div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center" style="margin-left:auto">
        <div>about</div>
        <div>portfolio</div>
        <div>contact</div>
      </div>
    </div>
  </mat-card-header>

並且在兩種情況下都通過提供fxFlex="1 0 0"使wrapper div flex-grow: 1