蔚来实习一面题：Grid 与 Flex 布局与使用场景对比

最近很多27找实习，大部分面试会问一下flex布局这种基础前端问题，上周有同学反馈蔚来一面有出过，所以小圆不仅整理了flex还整理了grid方便学习以及比较。

在现代前端开发中，CSS 布局系统的核心已从传统的浮动与定位，逐步过渡到 Flexbox 与 Grid。这两种布局方案在现代浏览器中均得到广泛支持，它们在理念上有明显差异，也各自适用于不同的布局场景。本文将系统梳理两者的特性、差异与应用边界，为开发者提供实践层面的参考。

一、布局理念对比

Flexbox 着重解决“一维”问题，即在一条轴线上对齐、分配与伸缩。而 Grid 进一步抽象出“二维”模型，使开发者可以在行与列两个方向上精确控制布局。

二、Flex 布局详解

1. 核心概念

Flex（Flexible Box）布局由容器（Flex Container）与项目（Flex Items）组成。通过设置 display: flex，元素的子节点会按主轴方向进行排列。

2. 主轴与交叉轴

Flex 的布局完全围绕“主轴（main axis）”展开，常用属性如下：

3. 弹性伸缩

flex 属性可同时控制项目的放大、缩小与基础宽度：

.item {
  flex: 1 0 100px; /* 放大比例1，缩小比例0，初始宽度100px */
}

这使得 Flex 在自适应组件、响应式导航等场景中极具优势。

4. Flex 的典型应用

• 水平或垂直居中布局；
• 多列等分布局；
• 导航栏、工具栏；
• 响应式列表（自动换行）；
• 单轴对齐组件（如按钮组、标签页）。

示例：水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

三、Grid 布局详解

1. 核心概念

Grid（CSS Grid Layout）是一种二维网格系统，允许开发者同时在行与列上控制元素的位置与尺寸。

定义方式：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto 100px;
  gap: 16px;
}

2. 行列定义与网格区域

• grid-template-columns / grid-template-rows 定义行列数量与尺寸；
• gap 设置网格间距；
• 子元素可通过 grid-column 与 grid-row 精确定位。

.item1 {
  grid-column: 1 / 3; /* 跨两列 */
  grid-row: 1 / 2;
}

3. 自动布局与命名区域

Grid 支持显式与隐式网格，甚至可以为区域命名：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

这种语义化布局方式在页面结构较复杂时极具可维护性。

4. Grid 的典型应用

• 响应式页面主结构（Header / Main / Footer / Sidebar）；
• 图文网格、相册、商品卡片；
• 仪表盘、后台管理系统；
• 多维信息可视化布局（如表格、面板矩阵）。

四、两者核心差异分析

五、选择策略与实际使用场景

1. 优先使用 Flex 的场景

• 元素按一条轴线排布；
• 内容长度不定、需自适应；
• UI 组件内部结构（如按钮组、导航条）；
• 小型响应式模块。

2. 优先使用 Grid 的场景

• 页面级布局；
• 需要精确控制行列尺寸；
• 复杂卡片或面板排列；
• 二维对齐场景（同时按行、列控制）。

3. 混合使用策略

在实际开发中，Flex 与 Grid 常常组合使用：

• 外层用 Grid 控制整体布局；
• 内层组件用 Flex 控制局部排列。

示例：

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.main {
  display: flex;
  flex-direction: column;
}

这种分层布局方式既能保证整体结构稳定，又能保留组件的自适应能力。

六、总结

Flex 与 Grid 是现代前端布局体系的两大支柱。掌握两者的差异与结合方式，能够显著提升布局的表达能力与代码可维护性。

• Flex 更适用于线性流式内容排列
• Grid 适合复杂、规则的整体布局设计。

在实际开发中，需要开发者能够合理地将两者配合使用，在性能与结构清晰度之间取得最佳平衡。