Flexbox弹性盒子与Grid布局结合如何使用_Flex Grid混合排列实践案例-css教程-PHP中文网

Flexbox弹性盒子与Grid布局结合如何使用_Flex Grid混合排列实践案例

P粉602998670

发布： 2025-11-24 03:01:35

原创

592人浏览过

Grid负责页面整体区域划分，Flex处理组件内部对齐；例如仪表盘中Grid定义 header、sidebar、content 布局，Flex实现卡片内容居中与导航滚动，响应式下二者协同优化显示。

flexbox弹性盒子与grid布局结合如何使用_flex grid混合排列实践案例

在现代网页布局中，Flexbox 和 Grid 是最常用的两种 CSS 布局方式。它们各有优势：Flexbox 擅长一维布局（行或列），适合内容对齐和动态伸缩；Grid 则擅长二维布局（行和列同时控制），适合复杂网格结构。将两者结合使用，可以发挥各自优势，实现更灵活、响应式更强的页面布局。

何时使用 Flex 与 Grid 的混合布局

虽然 Grid 能处理大多数布局需求，但在某些场景下，结合 Flexbox 更加高效：

容器用 Grid 分割整体区域，比如页头、侧边栏、主内容区、页脚等大块划分。
局部区域用 Flex 排列子元素，例如导航菜单、按钮组、卡片内部结构等需要动态对齐的内容。
响应式设计中互补使用：Grid 控制断点级别的结构变化，Flex 处理组件内部自适应排列。

实战案例：仪表盘布局（Dashboard）

我们构建一个典型的管理后台仪表盘界面，包含顶部导航、侧边栏、主内容区中的多个统计卡片。

示例结构：

<div class="dashboard">
  <header class="header">导航栏</header>
  <aside class="sidebar">菜单</aside>
  <main class="content">
    <div class="card">用户统计</div>
    <div class="card">订单统计</div>
    <div class="card">访问量</div>
    <div class="card">转化率</div>
  </main>
</div>

登录后复制

CSS 使用 Grid 划分整体结构

.dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-rows: 60px 1fr;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}
<p>.header { grid-area: header; background: #333; color: white; padding: 0 20px; }
.sidebar { grid-area: sidebar; background: #f4f4f4; }
.content {
grid-area: content;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
background: #eaeaea;
}</p>

登录后复制

卡片内部使用 Flex 布局对齐内容

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.card h3 {
  margin: 0 0 10px;
}
.card p {
  margin: 0;
  color: #666;
}

登录后复制

这里，Grid 完成了整个页面的宏观布局，而每个 .card 内部通过 Flex 实现了文字垂直居中、图标与文本整齐排列的效果，简洁且自适应。

雾象

WaytoAGI推出的AI动画生成引擎

1313

查看详情

响应式优化：断点中切换策略

在小屏幕上，我们可以调整 Grid 结构，并利用 Flex 让某些区域横向滚动或堆叠排列。

@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "sidebar"
      "content";
    grid-template-rows: 60px auto 1fr;
    grid-template-columns: 1fr;
  }
<p>.content {
grid-template-columns: 1fr; /<em> 卡片变为单列 </em>/
}</p><p>/<em> 导航项横向滚动 </em>/
.header {
display: flex;
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
}
}</p>

登录后复制

此时，顶部导航变成水平滚动的 Flex 容器，避免文字换行或挤压，提升移动端体验。