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