Html 如何在mat卡表头内设置左侧和右侧的元素组？

我需要将标题元素组设置为左侧和右侧

我有这样的想法：

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

添加fxLayoutGap后：

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

---

正如我所说，它没有响应性

您可以通过使包装器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>

---

在这两种情况下，通过提供

fxFlex=“1 0 0”

使包装器div

flex增长：1

，您可以通过使包装器div fxLayoutAlign“间隔”来实现

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

---

在这两种情况下，通过提供的

fxFlex=“1 0 0”

可能重复的请也共享css，使wrapper div

flex增长：1

。你需要提供一个最小的可验证的例子，这样我们才能重现你的问题。请在人们开始反对之前这样做。只是想帮个忙：）不，这个解决方案对我不起作用，我刚刚设置了fxLayoutGap=“155%”属性，它似乎对我有效，但也许你们知道一些更好的东西，但是在这种情况下，它是不响应的。可能的副本也请共享css。你需要提供一个最小的可验证的例子，这样我们才能重现你的问题。请在人们开始反对之前这样做。只是想帮个忙：）不，这个解决方案对我不起作用，我刚刚设置了fxLayoutGap=“155%”属性，它似乎对我有效，但也许你们知道一些更好的东西，但是在这种情况下它没有响应，这太棒了！这太棒了！

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