表单布局用 Flex 还是 Grid 更合适？

上官艺菲提问于 2026-03-04 15:36:21 阅读 2

组件

我在写一个用户信息编辑表单，想让 label 和 input 左右对齐，但用 Flex 布局总感觉间距控制不好，试过 Grid 又担心兼容性。有没有更稳妥的方案？

目前代码是这样写的：

const UserInfoForm = () => (
  <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>
);

但输入框长度不一致时，label 对不齐，看着很乱，求指点！

我来解答赞 1 收藏

反馈

1 条解答

UI春光 Lv1

别纠结 Flex 了，这场景就是 Grid 的强项。现在 Grid 兼容性早就不成问题了，除非你要支持 IE。直接把外层容器改成 Grid，定义好列宽，label 和 input 自动对齐，不用每个 label 单独写 width。

直接上代码，把外层容器设为 Grid，两列布局：第一列固定宽度给 label，第二列自动伸缩给 input。

const UserInfoForm = () => (

  <div style={{ 

    display: 'grid', 

    // 第一列固定80px，第二列占满剩余空间

    gridTemplateColumns: '80px 1fr', 

    gap: '12px',

    alignItems: 'center' 

  }}>

    <label>姓名</label>

    <input />

    

    <label>邮箱</label>

    <input />

    

    <label>备注</label>

    <input />

  </div>

);

这样写，所有 label 都在同一列，宽度统一，input 也在同一列，长度也统一。维护起来也简单，想改 label 宽度只需要改 gridTemplateColumns 一个地方，不用去遍历改样式。

2026-03-04 16:04