How to set groups of elements to the left and to the right inside the mat-card-header?

Question

I need to set groups of header elements to the left and to the right.

I have something like that:

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

And CSS that's relative to the mat-card-header:

.mat-card {
   padding: 0;
}

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

After adding fxLayoutGap:

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

Like I said, it is not responsive

Answer 1

you can either do it by making your wrapper 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>

or

giving margin-left: auto to the div you want to move right

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

and in both cases make wrapper div flex-grow: 1 by providing fxFlex="1 0 0"