用 display: flex 套一层容器可实现左右稳稳对齐，但必须将表单和右侧内容包裹在同一父容器内，正确设置 flex-basis、flex-wrap 及子项 flex 属性，避免混用 width 与 flex，并注意表单内部字段的基线对齐与 box-sizing 等细节。
直接说结论：用 display: flex 套一层容器，左表单右内容（或反之）就能稳稳对齐，不用浮动、不用绝对定位，也不依赖 Bootstrap 的栅格类——但前提是别漏掉 flex-wrap 和子项的 flex-basis 控制，否则在小屏上容易撑破或错行。
表单和右侧区域必须包裹在同一父容器里
这是最常被忽略的前提。HTML 中如果表单和右侧内容（比如图片、说明文字、操作按钮组）是平级兄弟元素，flex 就不起作用——因为弹性布局只作用于**直接子元素**。
- 错误写法：
<form></form><div class="aside"></div>，然后对body或main设display: flex - 正确写法：用一个
<div class="form-layout">包住两者，再设display: flex - 注意：如果右侧内容本身是多层嵌套（如
<div><img><p></p></div>），它仍算作一个 flex item，内部布局需另行处理
左右宽度分配靠 flex 而不是固定 width
硬写 width: 60% + width: 40% 在响应式场景下极易断裂；用 flex 缩写更可控。
- 左侧表单希望占宽 70%，右侧占 30%：给表单设
flex: 0 0 70%，右侧设flex: 0 0 30%（0 0表示不伸缩不收缩，只按基础宽度占位） - 想让右侧自适应剩余空间：表单设
flex: 0 0 300px（定宽），右侧设flex: 1，它会自动填满余下宽度 - 千万别混用
width和flex：比如同时设width: 200px和flex: 1，浏览器会优先按flex计算，width可能被忽略
小屏幕换行时 flex-wrap: wrap 必须显式声明
flex 默认是单行（flex-wrap: nowrap），哪怕加了 flex: 1，超宽也会溢出或横向滚动——这不是 bug，是默认行为。
立即学习“前端免费学习笔记（深入）”；
- 加
flex-wrap: wrap后，当容器宽度不够容纳两个子项时，右侧内容会自动换到下一行 - 换行后想让它顶左对齐？补一句
justify-content: flex-start（默认是flex-start，但有些重置 CSS 会改） - 如果换行后两行之间空隙太大，检查有没有意外的
margin或padding，特别是表单内部的fieldset或label自带外边距
表单内字段对齐别依赖 align-items 全局控制
align-items: center 看似能让所有子项垂直居中，但表单控件（input、select、textarea）的基线高度不一致，强行居中反而导致文字和边框错位。
- 更稳妥的做法：对表单内部字段单独设
display: flex+align-items: baseline（对齐文本基线） - 或者统一用
vertical-align: middle配合line-height控制，比全局align-items更可预测 - 特别注意
textarea：它默认是块级且带滚动条，flex容器里若没设height或min-height，它可能塌缩成一条线
真正麻烦的从来不是“怎么让左右并排”，而是“怎么让它们在各种输入框尺寸、各种字体大小、各种缩放比例下依然严丝合缝”。flex 提供了骨架，但每个 input 的 box-sizing、每张图片的 max-width、甚至 label 的 white-space，都得手动过一遍——不然上线后第一眼看到的就是错位和溢出。
