Unable to implement angular flex layout stretch property

Question

I am new to angular flex layout and working on angular 2 applications using flex layout.

I am trying to build a simple login page as shown below.

Below shown is my myform.component.html

<mat-toolbar color="primary" ><span class="span">SPACE STUDY</span></mat-toolbar>

<div class="card-container">

<mat-card  class="card-content">    

            <form  (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm" class="form-elements">
                             <br/>
                             <mat-icon style="-webkit-text-fill-color:#6A5ACD">account_circle</mat-icon><br/>
                             <p>LOGIN</p>

                                <mat-input-container class="form-row">
                                    <span matTooltip="Username">
                                        <input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username">
                                    </span>
                                    <span matPrefix><mat-icon style="color: black;"></mat-icon></span>
                                </mat-input-container>

                                <mat-input-container class="form-row">
                                    <span matTooltip="Password">
                                        <input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'">
                                    </span>
                                    <span matPrefix><mat-icon style="color: black;"></mat-icon></span>
                                </mat-input-container>

                                <div class="checkbox">
                                <mat-checkbox>REMEMBER ME</mat-checkbox>
                                </div><br/>
                    <button mat-raised-button color="primary" type="submit" mat-raised-button style="border-radius:15px;max-height:6vh;">Login</button>

                    <mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"></mat-progress-bar>
            </form>

</mat-card>

</div>

Below shown is my myform.component.css

.mat-toolbar{
   display: flex;
   align-items: center;
  justify-content: center;
  height: 35vh;
}
.span{
   font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size:16px;
}
.card-container {
  background-color: white;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-content {
  background-color: white;
  display: flex;
  min-width:70vh;
   align-content: stretch;
   align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.form-elements{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mat-icon {
    transform: scale(4);
}
.form-row{
   align-content: stretch;
}
.checkbox{
   display: flex;
   flex-direction: column;
   font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size:12px;
}

Below is my actual output window

As you can see above i want to take half of my form card over the mat-toolbar component.

I tried using padding and margin but its not giving me proper alignment.Can anybody please help me to align my form card as same in the first picture.

Also i tried applying stretch property to the mat-input-container to stretch the form input lines,but its not working..

please help me how to apply flex CSS to achieve my requirement..

Answer 1

Maybe you don't know, but Angular already has a flex layout system.

It's called Flex Layout, and you can find it here. it allows you to get rid of that repetitive CSS code for flexing your views.

Basic usage in your project :

<mat-card  class="card-content" fxLayout="row" fxLayoutAlign="center center">
  <form ... fxLayout="column" fxLayoutAlign="center stretch">
    ...
  </form>
</mat-card>

About your issue, I believe the stretch value can be applied to the align-items, not the align-content property.