Flexbox - ułożenie elementów obok siebie

pytanie zadane 14 listopada 2019 w HTML i CSS przez Michał_Warmuz Mądrala (5,830 p.)

Cześć. Mam taki problem. Chciałbym aby button-left znajdował się po lewej stronie. Utwór po srodku a button-right po prawej chciałbym aby było to zrobionę dzieki flexboxie uczę się go :) Ale te elementy dziwnie mi się układają pomozecie ? :)

Kod html:

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

Kod css:

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

      &.main {
        flex: 3;

        @media (max-width: $large) {
          padding-top: 15px;
        }
      }
      .left-button {
        display: flex;
        justify-content: left;
      }
      .right-button {
        display: flex;
        justify-content: right;
      }
      .mat-label {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 22px;

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

          .spotify {
            color: $spotify-color;
          }

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

https://zapodaj.net/91e4300eb0199.png.html

2 odpowiedzi

odpowiedź 14 listopada 2019 przez los losiowski Obywatel (1,800 p.)

W elemencie, który ma być po lewej stronie wpisz order: 1, w tym co na środku order: 2, a w tym co ma być po prawej order: 3.Ustaw przy tych elementach taki sam justify-content.Powinno zadziałać

Pokaż 6 poprzednich komentarzy

komentarz 14 listopada 2019 przez Michał_Warmuz Mądrala (5,830 p.)

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

        }

      }

    }

  }

Kurcze i nie pomaga :(

komentarz 14 listopada 2019 przez los losiowski Obywatel (1,800 p.)

justify content center ustawia elementy do środka i wtedy kolejnosc nie ma sensu daj na left lub right

komentarz 14 listopada 2019 przez Michał_Warmuz Mądrala (5,830 p.)

na wszystkie tak ?

komentarz 14 listopada 2019 przez los losiowski Obywatel (1,800 p.)

tak

komentarz 14 listopada 2019 przez Michał_Warmuz Mądrala (5,830 p.)

.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: right;
        order: 3;
      }

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

      .mat-label {
        display: flex;
        justify-content: right;
        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;
        }
      }
    }
  }

i teraz wygląda to tak :(

https://zapodaj.net/47f1521106fef.png.html