Как установить группы элементов слева и справа внутри заголовка mat-card? - PullRequest
Новая
       5

Как установить группы элементов слева и справа внутри заголовка mat-card?

0 голосов
/ 08 февраля 2019

Мне нужно установить группы элементов заголовка слева и справа.

У меня есть что-то вроде этого: 

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

И CSS это относительно mat-card-header: 

.mat-card {
   padding: 0;
}

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

img

После добавления fxLayoutGap: 

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

img1 img2

Как я уже сказал, этоне отвечает

1 Ответ

0 голосов
/ 09 февраля 2019

вы можете сделать это, сделав свой упаковщик div fxLayoutAlign 'space -ween' 

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

и в обоих случаях создайте оболочку div flex-grow: 1, указав fxFlex="1 0 0"

...