CSS Grid + Flexbox响应式复杂布局实现

CSS Grid与Flexbox布局实战

原创

已于 2025-12-09 13:40:39 修改 · 612 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-12-09 09:49:48 首次发布

CSS Grid + Flexbox响应式复杂布局实现

🤔 为什么需要结合CSS Grid和Flexbox？

在前端布局中，CSS Grid和Flexbox是两种强大的布局工具，但它们各自擅长不同的场景：

Flexbox：一维布局（行或列），适合处理元素的对齐、分布和弹性伸缩
CSS Grid：二维布局（行和列同时），适合创建复杂的网格结构和精确的元素定位

结合使用这两种布局技术，我们可以：

快速构建复杂的响应式界面
灵活处理不同尺寸和形状的元素
减少布局嵌套层级，提高代码可维护性
实现传统布局技术难以完成的复杂设计

💡 基础概念回顾

1. CSS Grid基础

CSS Grid是一种二维布局系统，允许我们同时控制行和列：

.container {
   
   
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 定义3列，比例为1:2:1 */
  grid-template-rows: auto 1fr auto; /* 定义3行，第一行和第三行自适应内容高度，第二行占据剩余空间 */
  gap: 20px; /* 网格线之间的间距 */
  grid-template-areas: /* 定义网格区域 */
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.item1 {
   
    grid-area: header; }
.item2 {
   
    grid-area: sidebar; }
.item3 {
   
    grid-area: main; }
.item4 {
   
    grid-area: aside; }
.item5 {
   
    grid-area: footer; }

2. Flexbox基础

Flexbox是一种一维布局系统，适合处理元素的对齐和分布：

.container {
   
   
  display: flex;
  flex-direction: row; /* 主轴方向：row（行）或 column（列） */
  justify-content: space-between; /* 主轴对齐方式：flex-start, flex-end, center, space-between, space-around, space-evenly */
  align-items: center; /* 交叉轴对齐方式：stretch, flex-start, flex-end, center, baseline */
  flex-wrap: wrap; /* 是否换行：nowrap（不换行）, wrap（换行）, wrap-reverse（反向换行） */
  gap: 10px; /* 元素之间的间距 */
}

.item {
   
   
  flex: 1 0 200px; /* 简写：flex-grow flex-shrink flex-basis */
  /* flex-grow: 1; 元素的放大比例 */
  /* flex-shrink: 0; 元素的缩小比例 */
  /* flex-basis: 200px; 元素的初始宽度 */
}

🚀 基础实现：卡片布局

让我们先通过一个简单的卡片布局，了解如何结合使用CSS Grid和Flexbox。

1. 需求分析

我们需要实现一个响应式卡片布局，包含以下特点：

桌面端：3列网格布局
平板端：2列网格布局
移动端：1列布局
卡片内部使用Flexbox实现内容的垂直对齐和分布

2. 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid + Flexbox 卡片布局</title>
  <style>
    /* 全局样式 */
    * {
     
     
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
     
     
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
    }
    
    .container {
     
     
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    h1 {
     
     
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
    }
    
    /* 卡片网格布局 */
    .card-grid {
     
     
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 25px;
    }
    
    /* 卡片样式 */
    .card {
     
     
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    
    .card:hover {
     
     
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    
    /* 卡片图片 */
    .card-img {
     
     
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    /* 卡片内容 */
    .card-content {
     
     
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .card-title {
     
     
      font-size: 1.5rem;
      margin-bottom: 10px;
      color: #2c3e50;
    }
    
    .card-description {
     
     
      font-size: 1rem;
      color: #7f8c8d;
      margin-bottom: 15px;
      flex: 1;
    }
    
    /* 卡片标签 */
    .card-tags {
     
     
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .tag {
     
     
      background-color: #e3f2fd;
      color: #1976d2;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 500;
    }
    
    /* 卡片按钮 */
    .card-btn {
     
     
      display: inline-block;
      padding: 10px 20px;
      background-color: #3498db;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 500;
      transition: background-color 0.3s ease;
      text-align: center;
    }
    
    .card-btn:hover {
     
     
      background-color: #2980b9;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
     
     
      .card-grid {
     
     
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
      }
      
      .card-title {
     
     
        font-size: 1.3rem;
      }
    }
    
    @media (max-width: 480px) {
     
     
      .container {
     
     
        padding: 10px;
      }
      
      .card-grid {
     
     
        grid-template-columns: 1fr;
        gap: 15px;
      }
      
      .card-content {
     
     
        padding: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Grid + Flexbox 卡片布局</h1>
    
    <div class="card-grid">
      <div class="card">
        <img src="https://picsum.photos/seed/card1/600/400" alt="卡片图片" class="card-img">
        <div class="card-content">
          <h3 class="card-title">React Hooks 实战</h3>
          <p class="card-description">深入学习 React Hooks 的使用技巧和最佳实践，掌握现代 React 开发的核心能力。</p>
          <div class="card-tags">
            <span class="tag">React</span>
            <span class="tag">Hooks</span>
            <span class="tag">前端开发</span>
          </div>
          <a href="#" class="card-btn">查看详情</a>
        </div>
      </d