Как центрировать материал по горизонтали с помощью флекс-макета? - PullRequest
Новая
       36

Как центрировать материал по горизонтали с помощью флекс-макета?

0 голосов
/ 17 января 2019

Я стараюсь использовать в своем проекте только flex-layout и избегать ванильных CSS. Я не могу понять, как отцентрировать горизонтально-угловой материал степпера и получить хороший обзор. Я проверяю margin: 0 auto;, и он работает правильно. Вот мой код: 

<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
  <mat-step>
    <form>
      <ng-template matStepLabel>
        Fill out ballot name
      </ng-template>
      <mat-form-field>
        <input matInput placeholder="Ballot name">
      </mat-form-field>
      <div>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form fxLayout="column">
      <ng-template matStepLabel>
        Select start and end time
      </ng-template>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
        <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
        <mat-datepicker #pickerStart></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
        <mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
        <mat-datepicker #pickerEnd></mat-datepicker>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form>
      <ng-template matStepLabel>
        Enter a description of ballot
      </ng-template>
      <mat-form-field>
        <textarea matInput placeholder="Description"></textarea>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button (click)="stepper.reset()">Reset</button>
        <button mat-flat-button>Confirm</button>
      </div>
    </form>
  </mat-step>
</mat-vertical-stepper>

Скриншот проблемы:

enter image description here

1 Ответ

0 голосов
/ 18 января 2019

Каждый шаг имеет разную ширину, поэтому ожидаемый результат будет ожидаемым. Когда вы горизонтально центрируете вертикально сложенные элементы, более широкие элементы будут появляться за пределами более узких элементов. Вам нужно отцентрировать весь степпер и выровнять шаги влево: 

<div fxLayoutAlign="center center" fxLayout="column">

  <mat-vertical-stepper [linear]="true" #stepper>
    ...
  </mat-vertical-stepper>

</div>

StackBlitz

...