Grid布局和Flex布局有什么区别？

这俩都是CSS里强大的布局工具，但设计哲学和擅长领域完全不同。你可以这么理解：Flexbox是“一维”布局，它只关心一个方向上的排列，要么一行，要么一列。而Grid是“二维”布局，它同时处理行和列，像个网格系统。

举个例子就明白了。假设你要做一排导航按钮，让它们均匀分布，用Flexbox就特别顺手：

.nav {
  display: flex;
  justify-content: space-between;
}

它只关心主轴（水平方向）上的空间分配。但如果你要规划一个完整的页面，有页头、侧边栏、主内容区和页脚，Grid才是正解：

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Grid让你能宏观地定义整个区域的划分，然后把元素精准地“放置”到定义好的单元格里，这种控制力是Flexbox不具备的。

所以，核心区别在于维度。Flexbox适合在一条线上排列、对齐和分配项目，比如导航栏、工具栏或者卡片列表。它处理的是“内容流”。Grid则适合构建整体的页面骨架或复杂的二维模块，它先搭好“棋盘格”，再往里放东西。

在HTML5的现代Web开发中，它们俩是绝佳的互补搭档。我的习惯是：用Grid来搭建页面的宏观结构，然后在Grid划分出的某个区域内部，如果需要精细的排列，再嵌套使用Flexbox。就像先用钢筋（Grid）盖出房子框架，再用木板（Flexbox）做内部隔断。搞清楚这个主次关系，你的布局思路会清晰很多。