20个CSS3 Flexbox弹性盒子响应布局实战详解(附源码)

文章目录

• 20个CSS3 Flexbox弹性盒子响应布局实战详解
  • 什么是Flexbox布局？
  • 1. 基础Flexbox布局
  • 2. 垂直居中布局
  • 3. 水平垂直居中
  • 4. 等分布局
  • 5. 固定与弹性宽度组合
  • 6. 响应式导航
  • 7. 卡片布局
  • 8. 圣杯布局
  • 9. 输入框组
  • 10. 媒体对象
  • 11. 粘性页脚
  • 12. 多列表单
  • 13. 对齐方式控制
  • 14. 等高列
  • 15. 顺序控制
  • 16. 流式网格
  • 17. 图文混排
  • 18. 底部对齐
  • 19. 多行布局
  • 20. 复杂嵌套布局
  • Flexbox布局的核心概念
    • 主轴和交叉轴
    • 容器属性
    • 项目属性
  • 20个CSS3 FlexBox布局示例源码
  • 响应式设计技巧
  • 浏览器兼容性
  • 总结

20个CSS3 Flexbox弹性盒子响应布局实战详解

Flexbox布局模型是CSS3中最重要的布局方案之一，它能够轻松实现各种复杂布局，同时具备优秀的响应式特性。本文将详细介绍20个实用的Flexbox布局示例，每个示例都包含完整代码和效果演示。

什么是Flexbox布局？

Flexbox（弹性盒子布局）是CSS3中一种新的布局模式，专门设计用于更有效地布置、对齐和分配容器中项目之间的空间，即使它们的大小是未知或动态的。Flexbox的核心思想是让容器能够改变其子元素的宽度、高度和顺序，以最佳方式填充可用空间。

1. 基础Flexbox布局

最简单的Flexbox布局，子元素水平排列并在容器内均匀分布空间。

<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

.flex-container {
  display: flex;
  gap: 15px;
}

.flex-item {
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
}

核心要点：

• display: flex 启用Flexbox布局
• gap 属性设置项目之间的间距
• flex: 1 让所有项目平分可用空间

2. 垂直居中布局

使用Flexbox轻松实现元素的垂直居中，无需复杂的定位或计算。

.vertical-center {
  display: flex;
  align-items: center;
  height: 150px;
  background: #e9ecef;
  padding: 20px;
}

.centered-content {
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

核心要点：

• align-items: center 实现垂直居中
• 设置容器高度使垂直居中生效

3. 水平垂直居中

使用Flexbox同时实现水平和垂直居中，完美解决传统居中的难题。

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: #e9ecef;
}

.centered-item {
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

核心要点：

• justify-content: center 实现水平居中
• align-items: center 实现垂直居中
• 同时使用两个属性实现完全居中

4. 等分布局

使用flex: 1让子元素自动平分容器空间，无论有多少个子元素。

.equal-distribution {
  display: flex;
  gap: 15px;
}

.equal-item {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
}

核心要点：

• flex: 1 是 flex-grow: 1 的简写
• 所有项目具有相同的flex值，确保等分

5. 固定与弹性宽度组合

结合固定宽度和弹性宽度的布局，侧边栏固定，主内容区域自适应。

.fixed-flex-layout {
  display: flex;
  gap: 15px;
}

.sidebar {
  width: 200px;
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.main-content {
  flex: 1;
  background: #3a0ca3;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

核心要点：

• 固定宽度元素使用width属性
• 弹性元素使用flex: 1填充剩余空间

6. 响应式导航

使用Flexbox创建响应式导航栏，在小屏幕上自动调整布局。

.responsive-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #212529;
  color: white;
  padding: 15px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .responsive-nav {
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

核心要点：

• 使用媒体查询实现响应式
• flex-direction: column 在小屏幕上垂直排列

7. 卡片布局

使用Flexbox创建灵活的卡片布局，卡片自动适应容器宽度并自动换行。

.card-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

核心要点：

• flex-wrap: wrap 允许项目换行
• flex: 1 1 300px 设置项目基础宽度和弹性行为

8. 圣杯布局

经典的页头、内容区、侧边栏和页脚布局，使用Flexbox实现更加简洁。

.holy-grail {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background: #4361ee;
  color: white;
  padding: 15px;
  text-align: center;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 200px;
  background: #3a0ca3;
  color: white;
  padding: 15px;
}

.main {
  flex: 1;
  background: #4cc9f0;
  color: white;
  padding: 15px;
}

.footer {
  background: #212529;
  color: white;
  padding: 15px;
  text-align: center;
}

核心要点：

• 使用嵌套Flexbox容器
• 主容器使用flex-direction: column
• 内容区域使用flex: 1填充空间

9. 输入框组

使用Flexbox创建输入框和按钮的组合，确保它们在同一行并对齐。

.input-group {
  display: flex;
  width: 100%;
  max-width: 500px;
}

.input-group input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
}

.input-group button {
  border-radius: 0 4px 4px 0;
}

核心要点：

• 输入框使用flex: 1填充可用空间
• 使用边框半径创建无缝连接效果

10. 媒体对象

经典的媒体对象布局，图片在左侧，内容在右侧，使用Flexbox轻松实现。

.media-object {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.media-image {
  width: 80px;
  height: 80px;
  background: #4361ee;
  border-radius: 8px;
  flex-shrink: 0;
}

.media-content {
  flex: 1;
}

核心要点：

• align-items: flex-start 顶部对齐
• flex-shrink: 0 防止图片被压缩

11. 粘性页脚

使用Flexbox创建粘性页脚，无论内容多少，页脚始终位于页面底部。

.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-header {
  background: #4361ee;
  color: white;
  padding: 15px;
  text-align: center;
}

.sticky-main {
  flex: 1;
  background: #f8f9fa;
  padding: 20px;
}

.sticky-footer {
  background: #212529;
  color: white;
  padding: 15px;
  text-align: center;
}

核心要点：

• 主内容区使用flex: 1填充空间
• 容器使用min-height: 100vh确保至少占满整个视口

12. 多列表单

使用Flexbox创建多列表单布局，让表单元素在水平方向上排列。

.multi-column-form {
  max-width: 600px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.name-fields {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 480px) {
  .name-fields {
    flex-direction: column;
  }
}

核心要点：

• 使用Flexbox创建水平排列的表单字段
• 在小屏幕上切换为垂直布局

13. 对齐方式控制

展示Flexbox中不同的对齐方式：flex-start、center、flex-end和space-between。

.alignment-control {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* 其他对齐方式 */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

核心要点：

• justify-content 控制主轴对齐
• align-items 控制交叉轴对齐

14. 等高列

使用Flexbox轻松创建等高列布局，无论内容多少，所有列高度保持一致。

.equal-height-columns {
  display: flex;
  gap: 15px;
}

.column {
  flex: 1;
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

核心要点：

• Flexbox默认会使所有项目伸展到相同高度
• 不需要额外的高度计算

15. 顺序控制

使用order属性控制Flexbox子元素的显示顺序，无需修改HTML结构。

.order-control {
  display: flex;
  gap: 15px;
}

.order-item {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
  flex: 1;
}

.item-1 {
  order: 3;
  background: #4361ee;
}

.item-2 {
  order: 1;
  background: #3a0ca3;
}

.item-3 {
  order: 2;
  background: #f72585;
}

核心要点：

• order 属性控制显示顺序
• 数值越小，位置越靠前

16. 流式网格

使用Flexbox创建响应式流式网格，自动调整列数以适应不同屏幕尺寸。

.fluid-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.grid-item {
  flex: 1 1 150px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
}

@media (max-width: 768px) {
  .grid-item {
    flex: 1 1 120px;
  }
}

@media (max-width: 480px) {
  .grid-item {
    flex: 1 1 100%;
  }
}

核心要点：

• flex: 1 1 150px 设置基础宽度和弹性行为
• 使用媒体查询调整不同屏幕上的表现

17. 图文混排

使用Flexbox实现图文混排布局，图片和文字可以灵活排列和对齐。

.image-text-layout {
  display: flex;
  gap: 20px;
  align-items: center;
}

.image-container {
  width: 150px;
  height: 100px;
  background: #4361ee;
  border-radius: 8px;
  flex-shrink: 0;
}

.text-content {
  flex: 1;
}

/* 图片在右侧的布局 */
.image-right {
  flex-direction: row-reverse;
}

核心要点：

• align-items: center 垂直居中图片和文字
• flex-direction: row-reverse 实现图片在右侧

18. 底部对齐

使用align-items: flex-end将Flexbox子元素在交叉轴上底部对齐。

.bottom-aligned {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 15px;
  background: #e9ecef;
  padding: 20px;
}

.bottom-item {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
  flex: 1;
}

核心要点：

• align-items: flex-end 实现底部对齐
• 需要设置容器高度

19. 多行布局

使用flex-wrap: wrap创建多行Flexbox布局，子元素自动换行到新行。

.multi-line-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.multi-line-item {
  flex: 1 1 200px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
}

核心要点：

• flex-wrap: wrap 允许项目换行
• 设置flex-basis控制项目的基础大小

20. 复杂嵌套布局

展示Flexbox嵌套使用的能力，创建复杂的多级布局结构。

.complex-nested {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.top-row {
  display: flex;
  gap: 15px;
}

.top-left {
  flex: 1;
  background: #4361ee;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.top-right {
  flex: 2;
  background: #3a0ca3;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.middle-row {
  display: flex;
  gap: 15px;
}

.nested-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

核心要点：

• 使用嵌套的Flexbox容器创建复杂布局
• 不同层级的容器可以使用不同的flex-direction

Flexbox布局的核心概念

主轴和交叉轴

Flexbox布局基于两个轴：主轴和交叉轴。默认情况下，主轴是水平方向，交叉轴是垂直方向，但可以通过flex-direction属性改变。

容器属性

• display: flex - 定义Flex容器
• flex-direction - 设置主轴方向
• flex-wrap - 控制是否换行
• justify-content - 主轴对齐方式
• align-items - 交叉轴对齐方式
• align-content - 多行内容对齐方式

项目属性

• order - 项目排序
• flex-grow - 项目放大比例
• flex-shrink - 项目缩小比例
• flex-basis - 项目基础大小
• flex - 以上三个属性的简写
• align-self - 单个项目对齐方式

20个CSS3 FlexBox布局示例源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20个CSS3 Flexbox弹性响应布局示例</title>
    <!-- 引入Prism.js代码高亮 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-css.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
            --warning: #f8961e;
            --danger: #e63946;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 40px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 15px;
            box-shadow: var(--shadow);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
        }
        
        .description {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .demo-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .demo-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .demo-title {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--secondary);
            border-bottom: 3px solid var(--primary);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .demo-title::before {
            content: "•";
            color: var(--accent);
            font-size: 2rem;
        }
        
        .demo-description {
            margin-bottom: 25px;
            color: #555;
            line-height: 1.7;
            font-size: 1.1rem;
        }
        
        .demo-container {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            background: var(--light);
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .code-container {
            background: #2d2d2d;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 20px;
        }
        
        .code-header {
            background: #1a1a1a;
            color: #f8f9fa;
            padding: 12px 20px;
            font-size: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .copy-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .copy-btn:hover {
            background: var(--secondary);
        }
        
        .code-content {
            padding: 20px;
            overflow-x: auto;
        }
        
        pre[class*="language-"] {
            margin: 0;
            background: transparent;
            font-size: 0.95rem;
        }
        
        /* Flexbox演示样式 */
        .flex-demo {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .demo-item {
            background: var(--primary);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-width: 80px;
        }
        
        .demo-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 15px;
            flex: 1;
            min-width: 200px;
        }
        
        .demo-nav {
            background: var(--dark);
            color: white;
            padding: 15px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .demo-nav a {
            color: white;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .demo-nav a:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .demo-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .btn:hover {
            background: var(--secondary);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            color: #6c757d;
            border-top: 1px solid #e9ecef;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .demo-title {
                font-size: 1.5rem;
            }
            
            .demo-container {
                padding: 15px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .demo-section {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    .demo-toc {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 200px;
    }
    .toc-section {
            background: white;
            border-radius: 15px;
            padding: 10px;
            margin-bottom: 40px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .toc-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .toc-title {
            font-size: 1rem;
            margin-bottom: 15px;
            color: var(--secondary);
            border-bottom: 3px solid var(--primary);
            padding: 10px 0;
            align-items: center;
        }

        .toc-title::before {
            content: "•";
            color: var(--accent);
            font-size: 1rem;
        }
        .toc-list{

            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toc-list a {
            color: var(--secondary);
            text-decoration: none;
            transition: var(--transition);
        }

        .toc-list a:hover {
            color: var(--primary);
        }
    </style>
</head>
<body>
<div class="demo-toc">
 <div class="toc-section">

            <h3  class="toc-title">目录</h3>
            <div class="toc-list" id="toc-list">
            </div>
 </div>
</div>
    <div class="container">
        <header>
            <h1>20个CSS3 Flexbox弹性响应布局示例</h1>
            <p class="description">使用纯CSS3 Flexbox实现的高质量响应式布局，涵盖各种常见页面布局场景</p>
        </header>
        
        <!-- 示例1: 基础Flexbox布局 -->
        <div class="demo-section">
            <h2 class="demo-title">1. 基础Flexbox布局</h2>
            <p class="demo-description">最简单的Flexbox布局，子元素水平排列并在容器内均匀分布空间。</p>
            
            <div class="demo-container">
                <div class="flex-demo">
                    <div class="demo-item">项目 1</div>
                    <div class="demo-item">项目 2</div>
                    <div class="demo-item">项目 3</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.flex-container {
    display: flex;
    gap: 15px;
}

.flex-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    flex: 1;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例2: 垂直居中布局 -->
        <div class="demo-section">
            <h2 class="demo-title">2. 垂直居中布局</h2>
            <p class="demo-description">使用Flexbox轻松实现元素的垂直居中，无需复杂的定位或计算。</p>
            
            <div class="demo-container">
                <div style="display: flex; align-items: center; height: 150px; background: #e9ecef; padding: 20px; border-radius: 8px;">
                    <div style="background: var(--primary); color: white; padding: 20px; border-radius: 8px;">
                        垂直居中的内容
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.vertical-center {
    display: flex;
    align-items: center;
    height: 150px;
    background: #e9ecef;
    padding: 20px;
}

.centered-content {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例3: 水平垂直居中 -->
        <div class="demo-section">
            <h2 class="demo-title">3. 水平垂直居中</h2>
            <p class="demo-description">使用Flexbox同时实现水平和垂直居中，完美解决传统居中的难题。</p>
            
            <div class="demo-container">
                <div style="display: flex; justify-content: center; align-items: center; height: 200px; background: #e9ecef; border-radius: 8px;">
                    <div style="background: var(--primary); color: white; padding: 20px; border-radius: 8px;">
                        水平垂直居中的内容
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.center-both {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: #e9ecef;
}

.centered-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例4: 等分布局 -->
        <div class="demo-section">
            <h2 class="demo-title">4. 等分布局</h2>
            <p class="demo-description">使用flex: 1让子元素自动平分容器空间，无论有多少个子元素。</p>
            
            <div class="demo-container">
                <div class="flex-demo">
                    <div class="demo-item" style="background: var(--primary);">等分 1</div>
                    <div class="demo-item" style="background: var(--secondary);">等分 2</div>
                    <div class="demo-item" style="background: var(--accent);">等分 3</div>
                    <div class="demo-item" style="background: var(--success);">等分 4</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.equal-distribution {
    display: flex;
    gap: 15px;
}

.equal-item {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例5: 固定与弹性宽度组合 -->
        <div class="demo-section">
            <h2 class="demo-title">5. 固定与弹性宽度组合</h2>
            <p class="demo-description">结合固定宽度和弹性宽度的布局，侧边栏固定，主内容区域自适应。</p>
            
            <div class="demo-container">
                <div style="display: flex; gap: 15px; width: 100%;">
                    <div style="width: 200px; background: var(--primary); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                        固定侧边栏
                    </div>
                    <div style="flex: 1; background: var(--secondary); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                        弹性主内容区
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.fixed-flex-layout {
    display: flex;
    gap: 15px;
}

.sidebar {
    width: 200px;
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.main-content {
    flex: 1;
    background: #3a0ca3;
    color: white;
    padding: 20px;
    border-radius: 8px;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例6: 响应式导航 -->
        <div class="demo-section">
            <h2 class="demo-title">6. 响应式导航</h2>
            <p class="demo-description">使用Flexbox创建响应式导航栏，在小屏幕上自动换行或调整布局。</p>
            
            <div class="demo-container">
                <div class="demo-nav">
                    <div style="font-weight: bold; font-size: 1.2rem;">LOGO</div>
                    <div style="display: flex; gap: 10px;">
                        <a href="#">首页</a>
                        <a href="#">产品</a>
                        <a href="#">服务</a>
                        <a href="#">关于</a>
                        <a href="#">联系</a>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.responsive-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #212529;
    color: white;
    padding: 15px;
    border-radius: 8px;
}

.nav-links {
    display: flex;
    gap: 10px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background 0.3s;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .responsive-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例7: 卡片布局 -->
        <div class="demo-section">
            <h2 class="demo-title">7. 卡片布局</h2>
            <p class="demo-description">使用Flexbox创建灵活的卡片布局，卡片自动适应容器宽度并自动换行。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                    <div class="demo-card">
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                    <div class="demo-card">
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                    <div class="demo-card">
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.card-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例8: 圣杯布局 -->
        <div class="demo-section">
            <h2 class="demo-title">8. 圣杯布局</h2>
            <p class="demo-description">经典的页头、内容区、侧边栏和页脚布局，使用Flexbox实现更加简洁。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-direction: column; height: 300px; width: 100%;">
                    <header style="background: var(--primary); color: white; padding: 15px; text-align: center; border-radius: 8px 8px 0 0;">
                        页头
                    </header>
                    <div style="display: flex; flex: 1;">
                        <aside style="width: 200px; background: var(--secondary); color: white; padding: 15px;">
                            左侧边栏
                        </aside>
                        <main style="flex: 1; background: var(--success); color: white; padding: 15px;">
                            主内容区
                        </aside>
                        <aside style="width: 200px; background: var(--accent); color: white; padding: 15px;">
                            右侧边栏
                        </aside>
                    </div>
                    <footer style="background: var(--dark); color: white; padding: 15px; text-align: center; border-radius: 0 0 8px 8px;">
                        页脚
                    </footer>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.holy-grail {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.content {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 200px;
    background: #3a0ca3;
    color: white;
    padding: 15px;
}

.main {
    flex: 1;
    background: #4cc9f0;
    color: white;
    padding: 15px;
}

.footer {
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        order: 2;
    }
    
    .main {
        order: 1;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例9: 输入框组 -->
        <div class="demo-section">
            <h2 class="demo-title">9. 输入框组</h2>
            <p class="demo-description">使用Flexbox创建输入框和按钮的组合，确保它们在同一行并对齐。</p>
            
            <div class="demo-container">
                <div style="display: flex; width: 100%; max-width: 500px;">
                    <input type="text" placeholder="请输入内容" style="flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 1rem;">
                    <button class="btn" style="border-radius: 0 4px 4px 0;">搜索</button>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.input-group {
    display: flex;
    width: 100%;
    max-width: 500px;
}

.input-group input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

.input-group button {
    border-radius: 0 4px 4px 0;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例10: 媒体对象 -->
        <div class="demo-section">
            <h2 class="demo-title">10. 媒体对象</h2>
            <p class="demo-description">经典的媒体对象布局，图片在左侧，内容在右侧，使用Flexbox轻松实现。</p>
            
            <div class="demo-container">
                <div style="display: flex; gap: 15px; align-items: flex-start; width: 100%;">
                    <div style="width: 80px; height: 80px; background: var(--primary); border-radius: 8px; flex-shrink: 0;"></div>
                    <div>
                        <h4 style="margin-bottom: 10px;">媒体标题</h4>
                        <p style="color: #666;">这是一段媒体对象的描述内容，可以包含详细的文字说明和其他信息。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.media-object {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.media-image {
    width: 80px;
    height: 80px;
    background: #4361ee;
    border-radius: 8px;
    flex-shrink: 0;
}

.media-content {
    flex: 1;
}

.media-title {
    margin-bottom: 10px;
}

.media-description {
    color: #666;
    line-height: 1.5;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例11: 粘性页脚 -->
        <div class="demo-section">
            <h2 class="demo-title">11. 粘性页脚</h2>
            <p class="demo-description">使用Flexbox创建粘性页脚，无论内容多少，页脚始终位于页面底部。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-direction: column; height: 250px; width: 100%;">
                    <header style="background: var(--primary); color: white; padding: 15px; text-align: center; border-radius: 8px 8px 0 0;">
                        页头
                    </header>
                    <main style="flex: 1; background: var(--light); padding: 20px;">
                        主内容区域
                        <p>当内容较少时，页脚会固定在底部。</p>
                    </main>
                    <footer style="background: var(--dark); color: white; padding: 15px; text-align: center; border-radius: 0 0 8px 8px;">
                        页脚 - 始终位于底部
                    </footer>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.sticky-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sticky-header {
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.sticky-main {
    flex: 1;
    background: #f8f9fa;
    padding: 20px;
}

.sticky-footer {
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例12: 多列表单 -->
        <div class="demo-section">
            <h2 class="demo-title">12. 多列表单</h2>
            <p class="demo-description">使用Flexbox创建多列表单布局，让表单元素在水平方向上排列。</p>
            
            <div class="demo-container">
                <div class="demo-form" style="max-width: 600px;">
                    <h3 style="margin-bottom: 20px;">多列表单</h3>
                    <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                        <div class="form-group" style="flex: 1;">
                            <label for="firstname">名字</label>
                            <input type="text" id="firstname" placeholder="请输入名字">
                        </div>
                        <div class="form-group" style="flex: 1;">
                            <label for="lastname">姓氏</label>
                            <input type="text" id="lastname" placeholder="请输入姓氏">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" placeholder="请输入邮箱">
                    </div>
                    <button class="btn" style="width: 100%;">提交</button>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.multi-column-form {
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.name-fields {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #4361ee;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

@media (max-width: 480px) {
    .name-fields {
        flex-direction: column;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例13: 对齐方式控制 -->
        <div class="demo-section">
            <h2 class="demo-title">13. 对齐方式控制</h2>
            <p class="demo-description">展示Flexbox中不同的对齐方式：flex-start、center、flex-end和space-between。</p>
            
            <div class="demo-container">
                <div style="display: flex; justify-content: space-between; width: 100%;">
                    <div class="demo-item" style="background: var(--primary);">左对齐</div>
                    <div class="demo-item" style="background: var(--secondary);">居中</div>
                    <div class="demo-item" style="background: var(--accent);">右对齐</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.alignment-control {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.aligned-item {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
}

/* 其他对齐方式 */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例14: 等高列 -->
        <div class="demo-section">
            <h2 class="demo-title">14. 等高列</h2>
            <p class="demo-description">使用Flexbox轻松创建等高列布局，无论内容多少，所有列高度保持一致。</p>
            
            <div class="demo-container">
                <div style="display: flex; gap: 15px; width: 100%;">
                    <div style="flex: 1; background: var(--primary); color: white; padding: 20px; border-radius: 8px;">
                        <h3>列标题 1</h3>
                        <p>这是一段中等长度的内容。</p>
                    </div>
                    <div style="flex: 1; background: var(--secondary); color: white; padding: 20px; border-radius: 8px;">
                        <h3>列标题 2</h3>
                        <p>这是一段较长内容，可能会占据更多空间，但由于Flexbox的特性，两列的高度会自动保持一致。</p>
                    </div>
                    <div style="flex: 1; background: var(--accent); color: white; padding: 20px; border-radius: 8px;">
                        <h3>列标题 3</h3>
                        <p>短内容。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.equal-height-columns {
    display: flex;
    gap: 15px;
}

.column {
    flex: 1;
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

/* 默认情况下，Flexbox会使所有项目伸展到相同高度 */
/* 如果需要控制对齐，可以使用 align-items 属性 */</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例15: 顺序控制 -->
        <div class="demo-section">
            <h2 class="demo-title">15. 顺序控制</h2>
            <p class="demo-description">使用order属性控制Flexbox子元素的显示顺序，无需修改HTML结构。</p>
            
            <div class="demo-container">
                <div class="flex-demo">
                    <div class="demo-item" style="background: var(--primary); order: 3;">项目 1 (order: 3)</div>
                    <div class="demo-item" style="background: var(--secondary); order: 1;">项目 2 (order: 1)</div>
                    <div class="demo-item" style="background: var(--accent); order: 2;">项目 3 (order: 2)</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.order-control {
    display: flex;
    gap: 15px;
}

.order-item {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
    flex: 1;
}

.item-1 {
    order: 3;
    background: #4361ee;
}

.item-2 {
    order: 1;
    background: #3a0ca3;
}

.item-3 {
    order: 2;
    background: #f72585;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例16: 流式网格 -->
        <div class="demo-section">
            <h2 class="demo-title">16. 流式网格</h2>
            <p class="demo-description">使用Flexbox创建响应式流式网格，自动调整列数以适应不同屏幕尺寸。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--primary);">网格项 1</div>
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--secondary);">网格项 2</div>
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--accent);">网格项 3</div>
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--success);">网格项 4</div>
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--warning);">网格项 5</div>
                    <div class="demo-item" style="flex: 1 1 150px; background: var(--danger);">网格项 6</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.fluid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.grid-item {
    flex: 1 1 150px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .grid-item {
        flex: 1 1 120px;
    }
}

@media (max-width: 480px) {
    .grid-item {
        flex: 1 1 100%;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例17: 图文混排 -->
        <div class="demo-section">
            <h2 class="demo-title">17. 图文混排</h2>
            <p class="demo-description">使用Flexbox实现图文混排布局，图片和文字可以灵活排列和对齐。</p>
            
            <div class="demo-container">
                <div style="display: flex; gap: 20px; align-items: center; width: 100%;">
                    <div style="width: 150px; height: 100px; background: var(--primary); border-radius: 8px; flex-shrink: 0;"></div>
                    <div>
                        <h3 style="margin-bottom: 10px;">图文混排标题</h3>
                        <p style="color: #666;">这是一段图文混排的描述内容。使用Flexbox可以轻松实现图片和文字的灵活排列，无论图片在左侧还是右侧，都可以完美对齐。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.image-text-layout {
    display: flex;
    gap: 20px;
    align-items: center;
}

.image-container {
    width: 150px;
    height: 100px;
    background: #4361ee;
    border-radius: 8px;
    flex-shrink: 0;
}

.text-content {
    flex: 1;
}

.image-text-title {
    margin-bottom: 10px;
}

.image-text-description {
    color: #666;
    line-height: 1.6;
}

/* 图片在右侧的布局 */
.image-right {
    flex-direction: row-reverse;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例18: 底部对齐 -->
        <div class="demo-section">
            <h2 class="demo-title">18. 底部对齐</h2>
            <p class="demo-description">使用align-items: flex-end将Flexbox子元素在交叉轴上底部对齐。</p>
            
            <div class="demo-container">
                <div style="display: flex; align-items: flex-end; height: 200px; gap: 15px; background: #e9ecef; padding: 20px; border-radius: 8px;">
                    <div class="demo-item" style="height: 80px; background: var(--primary);">项目 1</div>
                    <div class="demo-item" style="height: 120px; background: var(--secondary);">项目 2</div>
                    <div class="demo-item" style="height: 60px; background: var(--accent);">项目 3</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.bottom-aligned {
    display: flex;
    align-items: flex-end;
    height: 200px;
    gap: 15px;
    background: #e9ecef;
    padding: 20px;
}

.bottom-item {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
    flex: 1;
}

/* 其他对齐选项 */
.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例19: 多行布局 -->
        <div class="demo-section">
            <h2 class="demo-title">19. 多行布局</h2>
            <p class="demo-description">使用flex-wrap: wrap创建多行Flexbox布局，子元素自动换行到新行。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-wrap: wrap; gap: 15px; width: 100%;">
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--primary);">项目 1</div>
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--secondary);">项目 2</div>
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--accent);">项目 3</div>
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--success);">项目 4</div>
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--warning);">项目 5</div>
                    <div class="demo-item" style="flex: 1 1 200px; background: var(--danger);">项目 6</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.multi-line-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.multi-line-item {
    flex: 1 1 200px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
}

/* 控制换行行为 */
.nowrap {
    flex-wrap: nowrap; /* 默认值，不换行 */
}

.wrap {
    flex-wrap: wrap; /* 换行 */
}

.wrap-reverse {
    flex-wrap: wrap-reverse; /* 反向换行 */
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例20: 复杂嵌套布局 -->
        <div class="demo-section">
            <h2 class="demo-title">20. 复杂嵌套布局</h2>
            <p class="demo-description">展示Flexbox嵌套使用的能力，创建复杂的多级布局结构。</p>
            
            <div class="demo-container">
                <div style="display: flex; flex-direction: column; gap: 15px; width: 100%;">
                    <div style="display: flex; gap: 15px;">
                        <div style="flex: 1; background: var(--primary); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                            顶部左侧
                        </div>
                        <div style="flex: 2; background: var(--secondary); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                            顶部右侧
                        </div>
                    </div>
                    <div style="display: flex; gap: 15px;">
                        <div style="flex: 1; background: var(--accent); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                            中部左侧
                        </div>
                        <div style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
                            <div style="background: var(--success); color: white; padding: 15px; border-radius: 8px; text-align: center;">
                                嵌套上部
                            </div>
                            <div style="background: var(--warning); color: white; padding: 15px; border-radius: 8px; text-align: center;">
                                嵌套下部
                            </div>
                        </div>
                        <div style="flex: 1; background: var(--danger); color: white; padding: 20px; border-radius: 8px; text-align: center;">
                            中部右侧
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.complex-nested {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.top-row {
    display: flex;
    gap: 15px;
}

.top-left {
    flex: 1;
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.top-right {
    flex: 2;
    background: #3a0ca3;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.middle-row {
    display: flex;
    gap: 15px;
}

.middle-left {
    flex: 1;
    background: #f72585;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.nested-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nested-top {
    background: #4cc9f0;
    color: white;
    padding: 15px;
    border-radius: 8px;
}

.nested-bottom {
    background: #f8961e;
    color: white;
    padding: 15px;
    border-radius: 8px;
}

.middle-right {
    flex: 1;
    background: #e63946;
    color: white;
    padding: 20px;
    border-radius: 8px;
}</code></pre>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 CSS3 Flexbox弹性响应布局示例 | 使用纯CSS3实现，无第三方框架</p>
        </footer>
    </div>

    <script>
        // 复制代码功能
        function copyCode(button) {
            const codeContainer = button.closest('.code-container');
            const codeElement = codeContainer.querySelector('code');
            const textArea = document.createElement('textarea');
            textArea.value = codeElement.textContent;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            
            // 显示复制成功反馈
            const originalText = button.textContent;
            button.textContent = '已复制!';
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }
        
        // 初始化Prism高亮
        document.addEventListener('DOMContentLoaded', () => {
            Prism.highlightAll();
            const tocList = document.getElementById("toc-list");
            document.querySelectorAll("h2").forEach((e,index) => {
                const id = "demo-" + (index + 1);
                e.setAttribute("id",id);
                const link = document.createElement("a");
                link.href = "#" + id;
                link.textContent = e.textContent;
                link.classList.add("toc-link");
                tocList.appendChild(link);

            })
        });
    </script>
</body>
</html>

响应式设计技巧

1. 使用媒体查询 - 在不同屏幕尺寸下调整Flexbox属性
2. 利用flex-wrap - 允许项目在小屏幕上换行
3. 调整flex-direction - 在移动设备上切换为垂直布局
4. 使用相对单位 - 如百分比、vw/vh等，提高布局弹性

浏览器兼容性

Flexbox在现代浏览器中有很好的支持，包括：

• Chrome 29+
• Firefox 28+
• Safari 9+
• Edge 12+
• iOS Safari 9+
• Android Browser 4.4+

对于需要支持旧版浏览器的情况，可以考虑使用Autoprefixer等工具自动添加浏览器前缀。

总结

Flexbox布局模型为Web开发带来了革命性的变化，它简化了许多传统CSS布局中的难题。通过掌握这20个实用示例，您将能够应对大多数常见的布局需求，并创建出灵活、响应式的现代Web界面。

Flexbox的优势在于其直观性和灵活性，一旦掌握核心概念，您将能够快速实现各种复杂布局，同时保持代码的简洁和可维护性。