本文详解如何通过 flex-wrap 与 flex-basis 配合，将垂直堆叠的表单项重构为响应式双列布局，并兼顾移动端适配与语义结构优化。

本文详解如何通过 `flex-wrap` 与 `flex-basis` 配合，将垂直堆叠的表单项重构为响应式双列布局，并兼顾移动端适配与语义结构优化。

在构建 Odin Project 注册表单时，常见误区是直接对

设置 flex-direction: column——这会导致所有表单区块（

）强制纵向排列，无法实现目标中的两栏布局。核心解法并非“让输入框变两列”，而是让包裹每组 label+input 的

容器自动换行并均分宽度。

✅ 正确的 Flex 布局策略

1. 移除 flex-direction: column：让
   默认按 row 方向排列子元素（即各
   表单项容器）；
2. 启用换行：添加 flex-wrap: wrap，使超出容器宽度的
   自动折行；
3. 控制每项宽度：为每个表单项
   设置 flex-basis: calc(50% - 10px)，其中：

   • 50% 确保两列等宽；
   • - 10px 抵消左右 padding: 5px（共 10px 间距），避免因盒模型溢出导致第三列换行；
4. 补充垂直间距：添加 margin-bottom: 10px，提升可读性。

form {
  background-color: burlywood;
  display: flex;
  flex-wrap: wrap; /* 关键：允许换行 */
}

form div {
  flex-basis: calc(50% - 10px); /* 关键：精确控制双列宽度 */
  margin-bottom: 10px;
  padding: 5px;
}

? 响应式增强：移动优先的布局切换

原代码中图片与表单并排显示，在小屏下会挤压内容。推荐引入 .container 作为根级弹性容器，并用媒体查询实现断点适配：

.container {
  display: flex;
  flex-direction: column-reverse; /* 移动端：表单在上，图片在下 */
  align-items: center;
  max-width: 1280px;
  margin: auto;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* 平板/桌面：左右并排 */
  }
}

? 提示：column-reverse 让 HTML 中后写的 #Right-side（表单）在移动端视觉上位于图片上方，符合用户阅读流，同时无需调整 DOM 顺序。



百度·度咔剪辑

百度·度咔剪辑是一款由百度推出的创作 Agent 和 AI 视频剪辑工具。

下载

⚠️ 注意事项与最佳实践

• 勿对 单独设 display: flex：当前代码中 form div input { display: flex; } 是冗余且有害的——它会破坏原生输入框的渲染逻辑，应删除；
• 按钮需独立包裹
  ：提交按钮不属于双列表单项，应单独用

  包裹（如示例中

  ...

  ），避免被 flex-basis: 50% 影响；
• 语义化修复：原 @#@#@#@#@#@#@#@#@#@0 标签闭合错误，应为 ；
• 字体加载容错：本地字体 Norse-Bold.otf 若未提供，建议添加 font-family: Norse-Bold, system-ui, sans-serif 回退方案。

通过以上调整，你将获得一个结构清晰、响应灵敏、高度贴近参考图的双列注册表单——Flexbox 的真正力量，在于控制容器内项目的排列逻辑，而非强行定位单个元素。