flex布局和grid布局

Flex 布局（弹性布局）

Flex 是一维布局模型（仅针对「行」或「列」单一维度），核心解决「行内 / 列内元素的空间分配、对齐」问题，适合线性布局（如两栏 / 多栏、导航栏、居中对齐等）。

  • 核心特点

    ：

    1. 以「主轴（默认水平）+ 交叉轴」为核心，元素沿主轴排列；
    2. 侧重「剩余空间分配」（如 flex:1 自动占满剩余宽度）；
    3. 适配性强，适合响应式线性布局（如两栏、均分列表）。

  • 典型场景：导航栏、两栏 / 多栏自适应、元素垂直居中、流式布局。

Grid 布局（网格布局）

Grid 是二维布局模型（同时控制「行 + 列」），核心解决「多行列的网格分区」问题，适合复杂的二维布局（如卡片网格、表单布局、页面整体框架）。

  • 核心特点

    ：

    1. 把容器划分为「行 + 列」的网格，元素可占据任意单元格（跨行列）；
    2. 支持精确控制行列尺寸（固定 / 比例 / 自动），如 grid-template-columns: 100px 1fr 2fr；
    3. 布局更精准，适合复杂二维分区。

  • 典型场景：页面整体框架（头部 / 侧边 / 主体 / 底部）、商品卡片网格、表单多列布局。

核心区别

维度 Flex 布局 Grid 布局
布局维度 一维（行 / 列二选一） 二维（行 + 列同时控制）
设计思路 「内容驱动」，适配内容 「容器驱动」，先划网格再填内容
适用场景 线性布局（如两栏、导航） 复杂二维布局（如网格、页面框架）

简单总结

  • 做「一行 / 一列」的线性布局（如两栏自适应）→ 用 Flex，简洁高效；
  • 做「多行多列」的网格布局（如 3 行 2 列卡片）→ 用 Grid，精准可控。