如何用Flexbox将Angular 5 Material登录表单分为左右两部分？

嘿，很高兴你喜欢Flexbox！用Angular 5 Material结合它来做这个响应式登录表单完全可行，我来帮你搞定这个左右分栏的布局，还能保证在小屏幕上自动切换成上下布局～

我们可以利用Angular Material的Flex布局工具（@angular/flex-layout）来快速实现：

• 外层用一个flex容器，默认是横向（row）布局，把页面分成左右两个区块
• 左侧区块放登录图片，右侧区块放用户名/密码输入框和登录按钮
• 针对小屏幕（比如手机），自动切换成纵向（column）布局，图片在上，表单在下

login.component.html #

首先确保你已经引入了@angular/flex-layout模块，然后写HTML结构：

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="center center" class="login-container">
  <!-- 左侧登录图片区域 -->
  <div fxFlex="50%" fxFlex.lt-md="100%" class="login-image-wrapper">
    <img src="你的登录图片路径" alt="登录插图" class="login-image">
  </div>

  <!-- 右侧登录表单区域 -->
  <div fxFlex="50%" fxFlex.lt-md="100%" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px" class="login-form-wrapper">
    <h2>欢迎登录</h2>
    <mat-form-field appearance="outline" class="form-field">
      <mat-label>用户名</mat-label>
      <input matInput placeholder="请输入用户名" required>
    </mat-form-field>
    <mat-form-field appearance="outline" class="form-field">
      <mat-label>密码</mat-label>
      <input matInput type="password" placeholder="请输入密码" required>
    </mat-form-field>
    <button mat-raised-button color="primary" class="login-btn">登录</button>
  </div>
</div>

login.component.scss #

添加样式来优化布局和视觉效果：

.login-container {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.login-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.login-image {
  width: 80%;
  max-width: 400px;
  object-fit: cover; /* 保证图片不变形 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.login-form-wrapper {
  padding: 40px;
  width: 100%;
  max-width: 450px;
}

.form-field {
  width: 100%;
}

.login-btn {
  width: 100%;
  padding: 10px 0;
}

/* 如果不用@angular/flex-layout，也可以用纯CSS媒体查询做兼容 */
/* @media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }
  .login-image-wrapper, .login-form-wrapper {
    flex: 1 1 100%;
  }
} */

1. 响应式切换：用fxLayout.lt-md="column"表示当屏幕宽度小于中等尺寸（默认768px）时，容器切换为纵向布局；fxFlex.lt-md="100%"让两个区块在小屏幕占满宽度。
2. 图片适配：object-fit: cover确保图片在容器内按比例缩放，不会拉伸变形；设置max-width避免图片过大。
3. 表单对齐：用fxLayoutAlign="center center"让内容在区块内水平垂直居中，fxLayoutGap控制表单元素之间的间距。
4. 视觉优化：给图片添加阴影和圆角，表单设置最大宽度避免在大屏幕上太宽，提升用户体验。

这样你就能得到一个完全响应式的登录表单啦，替换成你自己的图片和表单逻辑就能用了～

内容的提问来源于stack exchange，提问作者Shaksham Singh