无法实现角度弹性布局拉伸属性答案

【问题标题】：Unable to implement angular flex layout stretch property无法实现角度弹性布局拉伸属性
【发布时间】：2018-09-22 12:16:47
【问题描述】：

我是 angular flex 布局的新手，并且正在使用 flex 布局开发 angular 2 应用程序。

我正在尝试构建一个简单的登录页面，如下所示。

下面显示的是我的 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>

下面显示的是我的 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;
}

下面是我的实际输出窗口

正如您在上面看到的，我想将表单卡片的一半放在 mat-toolbar 组件上。

我尝试使用填充和边距，但它没有给我正确的对齐方式。谁能帮我将我的表单卡与第一张图片中的一样。

我还尝试将拉伸属性应用于 mat-input-container 以拉伸表单输入行，但它不起作用..

请帮助我如何应用 flex CSS 来实现我的要求..

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

也许你不知道，Angular 已经有了一个弹性布局系统。

它被称为 Flex 布局，以及 you can find it here。它可以让你摆脱重复的 CSS 代码来展示你的视图。

项目中的基本用法：

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

关于您的问题，我相信stretch 值可以应用于align-items，而不是align-content 属性。

【讨论】：