ionic layout related css styles

1. Relative layout attribute 
The first kind of layout css styles for ionic (or html) are used to specify where to put the current element to its parents' space, including:
slot attribute for ion-item element,
float attribute of ion-float-left, ion-float-right, etc

The second kind of layout css styles are used to specify where its children elements and the element itself 's content should be put in its own space, including:
text align attributes of ion-text-start, and ion-text-center, etc
Flex container horizontal attribute of ion-justify-content-start, ion-justify-content-center, etc. (applied to ion-row for grid)
Flex container vertical attribute of ion-align-self-start, ion-align-self-center (applied to ion-row for grid)
ion-padding (applied to ion-grid for grid)
ion-margin (applied to ion-grid for grid )

2. Difference between ion-spinner and LoadingController 
Both ion-spinner and LoadingController can be used to show a busy spinner on html page to indicate the current task is busy. The difference is ion-spinner is just a html element of busy cursor shown on the screen, and it does not affect or block other html element's function. So user can still click a button to execute its handler.
On the contrary, when LoadingController is created and present on the screen, it shows the busy cursor as well as other message on an overlay of the current html page, similar to showing a modal dialog box on native apps, so all other UI elements are disabled by default, and user cannot click a button or link to continue.

Html code:

  <ion-button (click)="onLogin()"> Login

  </ion-button>

  <ion-button (click)="onLogin(true)"> Login Direct

  </ion-button>

  <ion-button (click)="onLoginByController()"> Login By Controller

  </ion-button>

  <div class="ion-text-center">

    <ion-spinner color="primary" *ngIf="isLoading"></ion-spinner>

  </div>

ts code:

  onLogin(b) {

    this.isLoading = true;

    console.log('login clicked');

    if (b) {

      this.isLoading = false;

      this.authService.login();

    } else {

      setTimeout(() => {

        this.isLoading = false;

        this.authService.login();

      }, 10000);

    }

  }

  onLoginByController() {

    this.loadingCtrl.create({keyboardClose: true, message: 'Logging in...'}).then(loadingEl => {

      loadingEl.present();

      setTimeout(() => {

        this.authService.login();

      }, 10000);

    });

  }