CSS Flexbox与Grid实战：从布局困惑到灵活运用

2026-05-26 码匠 前端开发

CSS 布局是前端开发的基本功。Flexbox 和 Grid 是现代 CSS 布局的两大支柱，但很多开发者对两者的使用场景仍然模糊——什么时候该用 Flexbox？什么时候该用 Grid？两者可以叠加使用吗？本文通过实战案例，帮你理清思路。

一、Flexbox vs Grid：该用哪个？

首先明确一个核心区别：

  • Flexbox：一维布局，适合处理一行或一列的元素排列
  • Grid：二维布局，适合同时处理行和列

简单记忆：如果只需要在一个方向（横或竖）排列，用 Flexbox；如果需要同时控制行和列，用 Grid。

二、Flexbox 实战技巧

1. 水平垂直居中

这是 Flexbox 最经典的应用：

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

2. 两端对齐，中间自适应

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

常用于导航栏：左侧 logo、右侧菜单。

3. 子元素等高

.cards {
    display: flex;
    gap: 20px;
}

.card {
    flex: 1;  /* 所有卡片等宽 */
    display: flex;
    flex-direction: column;
}

4. flex-grow / flex-shrink

.sidebar {
    flex-shrink: 0;  /* 不允许收缩 */
    width: 250px;
}

.content {
    flex-grow: 1;    /* 占据剩余空间 */
}

三、Grid 实战技巧

1. 经典两栏布局

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
}

2. 响应式网格

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

auto-fill + minmax(200px, 1fr) 是响应式布局的神器，无需 media query 自动适配。

3. 网格区域命名

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

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

网格区域命名让布局代码可读性更强。

4. 跨越行列

.featured {
    grid-column: span 2;  /* 横跨2列 */
    grid-row: span 2;     /* 横跨2行 */
}

四、Flexbox + Grid 组合使用

两者并不冲突，可以嵌套使用：

/* 外层用 Grid 布局整体结构 */
.page {
    display: grid;
    grid-template-columns: 1fr 300px;
}

/* 内层用 Flexbox 布局具体元素 */
.card {
    display: flex;
    flex-direction: column;
}

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

五、常见布局场景

场景推荐方案
导航栏Flexbox
卡片列表Grid（auto-fill）
表单Flexbox
页面整体布局Grid
图片画廊Grid
弹窗居中Flexbox
圣杯布局Flexbox 或 Grid

六、CSS Gap

无论 Flexbox 还是 Grid，都可以使用 gap 设置间距：

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;        /* 行和列统一间距 */
    row-gap: 24px;    /* 行间距单独设置 */
    column-gap: 8px;  /* 列间距单独设置 */
}

gap 比起手动算 margin 更简洁，也避免了最后一个元素需要单独处理的麻烦。

七、浏览器兼容性与前缀

Flexbox 和 Grid 的现代版本支持度已经非常好：

/* 通常只需加一个前缀 */
.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/* Grid 几乎不需要前缀，但保守起见 */
.grid {
    display: -ms-grid;
    display: grid;
}

八、实战练习建议

  1. 用 Grid 重构一个现有页面的整体布局
  2. 用 Flexbox 实现一个响应式导航栏
  3. 用 Grid 的 auto-fill 实现一个图片画廊（自动换行）
  4. 尝试 Flexbox + Grid 组合实现一个复杂的 Dashboard 布局

关于我们

如果你在前端开发、CSS 布局优化、响应式设计等方面需要帮助，尊云科技可以为你提供服务。

我们专注于网站建设、APP开发、小程序开发、PHP/Vue/UniApp开发、API接口、AI集成，拥有丰富的项目经验。

联系方式：

标签：