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

Possible duplicate of [How to align left and right text mat-card-header in angular 4?](https://stackoverflow.com/questions/52008662/how-to-align-left-and-right-text-mat-card-header-in-angular-4) — Harun Yilmaz, Feb 08 '19 at 14:41
Please also share the css. You need to provide a minimum verifiable example so we can reproduce your problem. Please do it before people start giving thumbs-down.Just trying to help :) — Yash009, Feb 08 '19 at 14:42
Just now I set fxLayoutGap="155%" property and it seems like it works for me, but maybe you guys know something better?
, but.. it is not responsive in this case — A. Isakau, Feb 08 '19 at 14:52

score 2 · Accepted Answer · answered Feb 09 '19 at 04:06

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"

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

1 Answers1