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

西门子荧提问于 2026-03-04 19:25:22 阅读 23

组件

最近在写一个用户信息编辑的表单，字段有姓名、邮箱、电话、地址这些，想让它们在桌面端两列显示，移动端一列。我试了用 Flex 布局，但对齐老出问题，标签和输入框高度不一致，看起来很乱。

是不是该换 CSS Grid？但又担心兼容性或者写起来太复杂。有没有更稳妥的做法？

const UserForm = () => (
  <form style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
    <div style={{ flex: '1 1 45%' }}>
      <label>姓名</label>
      <input type="text" />
    </div>
    <div style={{ flex: '1 1 45%' }}>
      <label>邮箱</label>
      <input type="email" />
    </div>
    {/* 其他字段... */}
  </form>
);

我来解答赞 2 收藏

反馈

2 条解答

小青 ☘︎ Lv1

哈哈这个问题我太有经验了，前几天刚被表单布局折磨过！Flex 确实有时候对齐会抽风，特别是标签和输入框高度不一致的时候。

Grid 现在兼容性其实挺好的，IE11都死了还管它干啥？我给你个简单实用的方案：



.form-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

}



@media (max-width: 768px) {

  .form-grid {

    grid-template-columns: 1fr;

  }

}

这样写比 Flex 清爽多了，几个优点：
1. 两列布局直接用 repeat(2,1fr) 搞定
2. 媒体查询切换单列特别简单
3. 所有格子自动对齐，不用操心高度问题

你原来的代码改一下就行：



const UserForm = () => (

  

    

      姓名

      

    


    {/* 其他字段... */}

  


);

真的别再用 Flex 折磨自己了，Grid 写表单布局就是降维打击。我上次用 Grid 重写表单后少写了 30% 的 CSS，对齐问题全没了。试试看，包爽！

2026-03-08 11:15

竞兮 Lv1

这种二维布局，Grid 绝对是首选，Flex 处理这种行列对齐确实费劲，而且容易把高度搞乱。兼容性现在完全不是问题，除非你要支持 IE，否则放心用。

用 Grid 的最大好处是行列对齐是自动的，不用你去算 flex-basis。代码给你，直接改成 Grid，配合 repeat(auto-fit, minmax(...)) 这一行就能自动搞定桌面两列、移动端一列，连媒体查询都省了。

const UserForm = () => (

  <form style={{

    display: 'grid',

    gap: '16px',

    // 关键在这里：最小宽度300px，不够就换行，完美适配响应式

    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'

  }}>

    <div style={{ display: 'flex', flexDirection: 'column' }}>

      <label>姓名</label>

      <input type="text" />

    </div>

    <div style={{ display: 'flex', flexDirection: 'column' }}>

      <label>邮箱</label>

      <input type="email" />

    </div>

    {/* 其他字段... */}

  </form>

);

这样写，每一列的高度会自动拉伸对齐，标签和输入框垂直排列也整齐。如果非要把标签和输入框放在同一行，把内部 div 的 flexDirection 改成 row 再加个 alignItems: center 也就完事了，比 Flex 嵌套 Flex 轻松太多。

2026-03-04 19:30