使用Flexbox开发表单时字段对齐异常，可接受CSS Grid解决方案

核心问题根因 #

当前布局的本质问题是采用嵌套Flex结构且没有跨行统一的宽度基准：

• 每个.form-group是独立的Flex容器，容器内部的元素宽度、弹性分配仅在当前容器内计算
• .form-group input设置的flex:3是当前容器内的弹性占比，不同容器的可用剩余空间不同，最终计算出的输入框宽度、偏移位置完全不一致
• label仅设置了max-width没有固定宽度，不同行的label实际渲染宽度存在差异，进一步放大错位效果

你怀疑的flex:3属性确实是错位的诱因之一，但仅删除该属性无法解决跨行元素无统一基准的根本问题。

优化方案 #

方案1：CSS Grid布局（推荐，对齐精度最高） #

Grid布局天然支持全局统一的列宽模板，所有行的列位置、宽度完全一致，不需要手动计算弹性比例，是表单类对齐场景的适配方案，且可以完全保留现有HTML结构，仅调整CSS即可：

/* 外层容器保持原有居中逻辑不变 */
.form-container {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.verification-form {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
}

.verification-form .form-group {
  grid-column: 1 / -1;
  width: 100%;
  /* 每个行采用全局统一的4列宽度模板，跨行完全对齐 */
  display: grid;
  grid-template-columns: 120px 1fr 100px 1fr;
  column-gap: 20px;
  align-items: center;
  margin-bottom: 0;
}

.form-group label {
  text-align: right;
  font-size: 11px;
  font-weight: bold;
  color: #484343;
  margin-left: 0;
  max-width: none;
}

.form-group input:not([type="checkbox"]) {
  padding: 4px 0;
  margin-left: 0;
  border: 0;
  border-bottom: 2px solid #d2d2d2;
  transition: border-color 0.3s;
  font-size: 18px;
}

/* 保留原有交互样式 */
.form-group input:hover,
.form-group input:focus {
  border-color: #aa2c2f;
  outline: 0;
}

input[type="checkbox"] {
  width: 28px !important;
  height: 28px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  background: #ffffff;
  padding: 0;
  margin-left: 0;
  border: 2px solid #d2d2d2;
  transition: border-color 0.3s;
  font-size: 18px;
  cursor: pointer;
}

input[type="checkbox"]:checked::after {
  content: "✔";
  color: #aa2c2f;
}

/* 修正原必填星号的位置，避免溢出到行尾 */
.form-group label:has(~ input:required)::after {
  content: "*";
  color: #f06d41;
  font-size: 16px;
  margin-left: 4px;
}

.verification-form .form-group:nth-child(3) {
  margin-bottom: 0;
}

效果说明：

• 所有行的左侧label统一在120px宽度的列内右对齐，输入框统一从120px+20px间距的位置开始
• 双输入框行的右侧label、输入框的位置跨行完全统一，单输入框行自动留空后两列，整体宽度和双输入框行完全一致

方案2：Flex布局改造（低版本浏览器兼容场景） #

如果需要兼容不支持Grid的旧浏览器，可以通过给所有跨行列设置固定宽度基准、替代原有弹性比例分配的方式实现对齐：

.form-container {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.verification-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
  align-items: stretch;
}

.verification-form .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 20px;
  margin-bottom: 0;
}

.form-group label {
  text-align: right;
  font-size: 11px;
  font-weight: bold;
  color: #484343;
  margin-left: 0;
  /* 给所有左侧label设置固定宽度，跨行完全统一 */
  width: 120px;
  flex-shrink: 0;
}

/* 右侧SMS标签单独设置固定宽度，和Grid方案的列宽保持一致 */
.form-group .sms-label {
  width: 100px;
  flex-shrink: 0;
}

.form-group input:not([type="checkbox"]) {
  padding: 4px 0;
  margin-left: 0;
  /* 去掉flex:3，用统一的弹性基准分配宽度，min-width:0避免内容撑开变形 */
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid #d2d2d2;
  transition: border-color 0.3s;
  font-size: 18px;
}

input[type="checkbox"] {
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  background: #ffffff;
  padding: 0;
  margin-left: 0;
  border: 2px solid #d2d2d2;
  transition: border-color 0.3s;
  font-size: 18px;
  cursor: pointer;
}

input[type="checkbox"]:checked::after {
  content: "✔";
  color: #aa2c2f;
}

/* 修正必填星号位置 */
.form-group label:has(~ input:required)::after {
  content: "*";
  color: #f06d41;
  font-size: 16px;
  margin-left: 4px;
}

说明：之前尝试用静态宽度控制但效果不佳的原因，是没有给所有跨行的label设置统一的固定宽度，仅给输入框设置静态宽度会因为label的实际渲染宽度差异，导致输入框的起始位置错位。

内容的提问来源于stack exchange，提问作者Aib Syed