表单布局用Grid还是Flex更合适？
我在写一个用户信息编辑的表单，想让标签和输入框对齐整齐，但用Flex总觉得控制不好间距和换行。试过用Grid，但又担心兼容性问题。大家一般怎么处理这种两列布局的表单？
这是我现在用Flex写的结构，效果不太理想：
const UserForm = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<label style={{ width: '80px' }}>姓名</label>
<input style={{ flex: 1 }} />
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<label style={{ width: '80px' }}>邮箱</label>
<input style={{ flex: 1 }} />
</div>
</div>
);1 条解答
首先你要明白两种布局的本质区别。Flex 是一维的，适合做单行或单列的排列，你现在的代码每个 row 都要单独设置 display: flex、alignItems: center，标签宽度还要手动写死 80px，这样很累。Grid 是二维的，行和列可以一起定义，天然适合这种"标签-输入框"对齐的场景。
来，看用 Grid 怎么写：
const UserForm = () => (
display: 'grid',
// 两列布局：标签列80px，输入框自动填充剩余空间
gridTemplateColumns: '80px 1fr',
// 行间距12px，列间距16px
gap: '12px 16px'
}}>
);
你看这段代码，gridTemplateColumns: '80px 1fr' 这一行就定义了列的宽度分布，第一列固定80px给标签，第二列自动填满。gap 同时控制行列间距，比你之前在每个 row 上单独设置方便多了吧？
而且用 Grid 还有一个好处，如果某一行标签特别长需要换行，Grid 会自动保持两列对齐，Flex 处理这种情况要麻烦很多。
关于兼容性，现在可以放心用了。除了 IE11 部分不支持（国内也基本没人用 IE 了吧），现代浏览器包括移动端都支持得很好。如果你真的需要兼容很老的浏览器，通常的做法是用 Flex 写个降级方案，不过我觉得必要性不大。
还有一个进阶技巧，如果你想让某些输入框跨两列（比如备注 textarea），直接加 gridColumn: '1 / -1' 就行，Grid 处理这种变长字段特别方便。
总结一下：表单这种左右对齐的布局，Grid 就是为这种场景设计的，用起来比 Flex 省心太多。