web-dev-qa-db-ja.com

Angular Flex Layout？

単純なログインコンポーネントを作成し、垂直方向に中央に配置したいのですが、Angular Flex Layoutライブラリを使用してこれを実現する方法がわかりません。

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

styles.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

スクリーンショット： enter image description here

cssangularcss3flexboxangular-flex-layout
6
Christian

flexboxを使用して要素を垂直方向にセンタリングしても、コンテナ要素がコンテンツと同じ高さの場合は効果がありません。トップレベルを作成する<div>あなたの例では、height: 100%（または他のAngular Flexレイアウト固有のソリューションが利用可能な場合-おそらくfxFlexFill）は、コンテンツを希望する場所に中央揃えする必要があります。

9
Kaivosukeltaja

親要素の高さがわかっている場合、必要なのはfxLayoutAlign="center center"：

<section class="intro-section">
  <div
   fxLayout="row"
   fxLayout.xs="column" 
   fxFlexFill
   fxLayoutAlign="center center"
  >
    <div fxFlex="50">
      <h1>MAYABI PORTFOLIO MULTIPURPOSE THEME</h1>
      <p>lorem ipsum dolor sit amt, consectet adop adipisicing elit, sed do eiusmod 
teporara incididunt ugt labore.</p>
    </div>
    <div fxLayout="50">
      hello
   </div>
  </div>
</section>

.intro-section {
   height: 500px;
}
7
Ericky

FxLayoutの高さを指定する必要があります（編集済み）

<div fxLayout="row" fxLayoutAlign="center center" class="row-height">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

CSS

.row-height {
    height: 100%
}
2
Abhijith