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

你这问题我太懂了，Flex布局搞表单对齐就是容易翻车。给你两个靠谱方案：

方案1：用Grid，别怕兼容性。现在Grid支持度已经很高了（96%+），性能上比Flex还轻量点。这么改：

const UserInfoForm = () => (

  <div style={{ 

    display: 'grid',

    gridTemplateColumns: '80px 1fr',

    gap: '12px',

    alignItems: 'center'

  }}>

    <label>姓名</label>

    <input />

    <label>邮箱</label>

    <input />

  </div>

);

方案2：非要Flex的话，用CSS变量保证宽度一致：

const UserInfoForm = () => (

  <div style={{ 

    '--label-width': '80px',

    display: 'flex',

    flexDirection: 'column',

    gap: '12px'

  }}>

    <div style={{ display: 'flex' }}>

      <label style={{ width: 'var(--label-width)' }}>姓名</label>

      <input style={{ flex: 1 }} />

    </div>

  </div>

);

个人推荐Grid方案，代码量少渲染性能更好。实在担心兼容性就加个autoprefixer。

别纠结 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 一个地方，不用去遍历改样式。