本文详解如何通过 flex-wrap 与 flex-basis 配合媒体查询，将垂直堆叠的表单字段重构为美观、响应式的双列布局，并兼顾移动端适配。
本文详解如何通过 `flex-wrap` 与 `flex-basis` 配合媒体查询，将垂直堆叠的表单字段重构为美观、响应式的双列布局，并兼顾移动端适配。
在构建 Odin Project 第六项注册表单时，许多初学者会遇到一个典型布局问题：默认使用 首先移除 接着，控制每个表单项 参考图中左侧为图片、右侧为表单。为兼顾小屏体验（如手机），我们引入 注意： 应用上述 CSS 后，6 个表单项将自动组成 3 行 × 2 列的网格（前两行为姓名/邮箱/密码，第三行为确认密码+按钮），在 ≥768px 屏幕上与图片左右并置，在小屏下则垂直堆叠、居中显示，完全匹配 Odin Project 参考设计的目标结构与用户体验逻辑。 Flex 不是“万能胶”，而是有章可循的布局系统——理解 flex-direction: column 后，所有表单项（如姓名、邮箱、密码等）垂直排列成单列，无法还原参考图中的双列结构（如“First Name”与“Last Name”并排、“Email”与“Phone Number”并排等）。核心解决思路不是强行用绝对定位或 nth-child 拆分，而是让表单容器成为弹性容器，让每个 ✅ 正确的 Flex 布局策略
form 上的 flex-direction: column（它会强制子元素纵向堆叠），改用：form {
display: flex;
flex-wrap: wrap; /* 允许子项在空间不足时换行 */
background-color: burlywood;
}
和 ，需为其设置固定基础宽度，同时预留左右内边距避免拥挤：form div {
flex-basis: calc(50% - 10px); /* 50% 宽度减去左右各 5px padding */
margin-bottom: 10px;
padding: 5px;
}
calc(50% - 10px) 确保两个子项能在一行内并排显示（总宽 ≈ 100% - 20px margin/padding），而 flex-wrap: wrap 则保障当窗口变窄时自动回退为单列——这是响应式的基础。? 响应式增强：图像与表单的横向/纵向切换
.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 让 DOM 顺序（图片在前、表单在后）在移动端视觉上变为「表单在上」，更符合用户阅读流；而在桌面端则恢复为左右并列，语义清晰且无需 JS 干预。⚠️ 注意事项与优化建议
position: relative 或 absolute：原代码中对 input 设置 position: relative 并无布局作用，反而可能干扰默认文档流，建议移除。。@#@#@#@#@#@#@#@#@#@0 应为 ，HTML 标签闭合错误需修正。@font-face 引用本地字体（Norse-Bold.otf）时，请确认路径正确；生产环境建议提供 woff2 格式并添加 font-display: swap 提升渲染性能。✅ 最终效果验证
flex-basis 控制尺寸、flex-wrap 管理换行、flex-direction 定义主轴，才能真正驾驭复杂表单的响应式重构。
