将表单设为Flex容器，通过flex:1、box-sizing:border-box和gap控制布局；嵌套容器实现并排输入框，配合媒体查询在小屏垂直堆叠，确保响应式适应。
使用CSS Flexbox实现弹性表单布局，能让输入框和其他表单元素在不同屏幕尺寸下自动适应，保持美观和可用性。关键是将表单设为Flex容器，并合理设置子元素的伸缩行为。
设置表单为Flex容器
要让表单内的元素灵活排列，先将或包裹容器设置为Flex容器。
通过以下CSS即可启用Flex布局：
.form-container {
display: flex;
flex-direction: column; /* 垂直排列字段 */
gap: 12px; /* 控制字段间距 */
}
若希望部分字段并排显示（如城市和邮编），可对特定行使用display: flex并设置水平方向。
立即学习“前端免费学习笔记（深入）”；
控制输入框的弹性伸展
输入框默认不会自动填充容器宽度，需通过CSS强制拉伸。
关键设置包括：
- flex: 1;：让输入框占据剩余空间
- width: 100%;：配合padding避免溢出
- box-sizing: border-box;：确保宽高包含边框和内边距
.input-field {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
组合多个输入框在同一行
对于需要并列显示的字段（如“姓”和“名”），可用嵌套Flex容器：
.name-row {
display: flex;
gap: 10px;
}
.first-name, .last-name {
flex: 1; / 平均分配宽度 /
}
这样两个输入框会在一行中等宽分布，同时在小屏幕上也能良好压缩。
响应式适配与断点调整
在移动设备上，有时需将并排字段改为垂直堆叠。
使用媒体查询切换布局：
@media (max-width: 600px) {
.name-row, .address-row {
flex-direction: column;
}
}
垂直排列后，每个输入框宽度自然充满父容器，提升移动端操作体验。
基本上就这些。用Flexbox做表单布局，结构清晰、维护简单，配合flex和gap能快速实现自适应效果，特别适合复杂或多场景的表单设计。不复杂但容易忽略细节，比如box-sizing和flex-basis的隐式影响，写的时候多测试几种屏幕尺寸更稳妥。
