I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center.
https://i.stack.imgur.com/WwCJy.png
Here is my home.component.html code:
<div fxLayout="row wrap" fxLayoutGap="20px grid">
<div *ngFor="let data of DUMMY_DATA">
<mat-card class="example-card" >
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content class="description-max-height">
<p>
{{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
This is how my home.component.css looks like:
.example-card {
width: 250px;
height: 300px;
}
.description-max-height {
max-height: 30px;
}
And here is the snippet from app.component.html:
<mat-toolbar color="primary" style="margin-bottom: 20px">
<mat-toolbar-row>
<span>Some title</span>
<span class="toolbar-spacer"></span>
<button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
<button mat-button color="accent" (click)="openSignupDialog()">Register</button>
</mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20"></div>
<router-outlet fxFlex="60"></router-outlet>
<div fxFlex="20"></div>
</div>
The associated app.compoenent.css styles are as follows:
.toolbar-spacer {
flex: 1 1 auto;
}
Any suggestions on how I can center the home.component.html without it being wider than its content?
You can view a working example on Stackblitz here