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

慕容庆玲提问于 2026-02-25 23:42:23 阅读 23

组件

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

也试过 CSS Grid，感觉控制行列更直观，但担心兼容性。有没有推荐的方案？或者是我 Flex 的写法有问题？下面是我目前的结构：

<form class="form-grid">
  <label>姓名</label>
  <input type="text" />
  <label>邮箱</label>
  <input type="email" />
  <label>电话</label>
  <input type="tel" />
</form>

对应的 CSS 用了 grid-template-columns: repeat(2, 1fr)，但 label 和 input 不在同一行对齐，看起来很乱。

我来解答赞 2 收藏

反馈

1 条解答

婧妍 Lv1

你这个结构本身没问题，问题出在 Grid 的写法上。你用了 grid-template-columns: repeat(2, 1fr)，但没告诉浏览器 label 和 input 是一对，结果浏览器默认按顺序排，就是 label1、input1、label2、input2……这样两列一截，自然就乱了。

Grid 要用在表单里，得明确每行两个格子：第一个是 label，第二个是 input。最简单的办法是用 grid-template-columns: auto 1fr，然后让 label 占第一列，input 占第二列，再加个 align-items: center 就能对齐高度了。

代码给你改好了，你直接用这个结构：

.form-grid {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 1rem;

  align-items: center;

}



/* 移动端单列，媒体查询里加这句 */

@media (max-width: 768px) {

  .form-grid {

    grid-template-columns: 1fr;

  }

}

HTML 结构不用动，保持你原来的顺序就行。label 和 input 是挨着写的，Grid 会自动按两列分组：第一列全放 label，第二列全放 input，自然就对齐了。

Flex 也能做，但你得每一对 label+input 包一层 div，比如 <div class="form-row"><label>...</label><input></div>，然后外层用 flex-wrap，这样才不会乱。你之前没包一层，flex-wrap 就会把所有 label 和 input 混着换行，肯定不对齐。

兼容性方面 Grid 完全没问题，IE 都不支持了的时代了，主流浏览器从 2017 年起都支持了，别担心。

顺便吐槽一句，表单用 Grid 真的比 Flex 友好，尤其是对齐这种需求，Grid 就是为这种“网格布局”设计的，Flex 更适合一维方向的排列，比如导航栏、卡片列表啥的。

2026-02-26 01:01