Ułożenie elementów flex

0

Cześć. Uczę się css i mam taki problem z flexboxem
Chciałbym ułożyć elementy aby wyglądały tak :
https://zapodaj.net/29b04def454b5.png.html
Html wygląda tak:

  <div class="title-group main">
    <button mat-button color="primary" class="left-button" *ngIf="!showUsageTypeNavigation" (click)="returnClick()">Powrót do szczegółów</button>
    <mat-label class="mat-label sub-title">
      {{ subTitle | translate }}{{ usageType | usageTypeSubtitle }}
      <ng-container *ngIf="!showUsageTypeNavigation">-&nbsp;<span class="spotify">Spotify</span></ng-container>
      <mat-icon color="primary">
        {{ icon }}
      </mat-icon>
    </mat-label>
    <button mat-button color="primary" class="right-button" *ngIf="showUsageTypeNavigation" (click)="returnClick()">Dane live (spotify)</button>
    <mat-label class="mat-label title">
      <div [innerHtml]="getTitle()">
      </div>
    </mat-label>
  </div>

a css:

   .title-group {
      display: flex;
      flex: 1;
      align-items: center;
      flex-direction: row;
      padding: 0 10px;
      min-width: 250px;

      &.main {
        flex: 3;

        @media (max-width: $large) {
          padding-top: 15px;
        }
      }
      .right-button {
        display: flex;
        justify-content: center;
        order: 3;
      }

      .left-button {
        display: flex;
        justify-content: center;
        order: 1;
      }

      .mat-label {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 22px;
        order: 2;

        &.sub-title {
          font-weight: 500;
          color: grey;
          order: 2;

          .spotify {
            color: $spotify-color;
          }

          .mat-icon {
            padding-left: 5px;
          }
        }

        &.title {
          font-weight: 600;
          padding: 15px 0 0 0;
        }
      }
    }
  }

jak ułożyć te elementy aby wyglądały jak pierwowzór ?

0

To co zapodałeś nie jest ani kodem html, ani kodem css, tylko materiałem z jakiegoś frameworka i preprocesora css.

1 użytkowników online, w tym zalogowanych: 0, gości: 1