面试题：Grid 和 Flex 区别在哪？#

很多前端觉得 Grid 太复杂，只用 Flex 走天下。其实核心区别很简单：

什么时候用 Flex？#

当你有一堆元素，想让它们自动排列、挤一挤、换个行时。比如：导航栏、标签列表、居中对齐。

1
.container {
2
  display: flex;
3
  justify-content: center; /* 水平居中 */
4
  align-items: center;     /* 垂直居中 */
5
}

当你要画一个 网格布局，或者 整体页面架构 时。比如：左边栏固定 200px，右边栏自适应，中间是内容。

1
.container {
2
  display: grid;
3
  grid-template-columns: 200px 1fr 200px; /* 左 中 右 */
4
  gap: 20px;
5
}

大布局用 Grid，小组件用 Flex。 Grid 搭骨架，Flex 填血肉。学会这两个，你就是 CSS 布局魔术师。

CSS Grid vs Flexbox：终极布局指南

作者

晨平安

发布于

2026-02-06

许可协议