4.1 Flexbox 基础概念
4.1.1 什么是 Flexbox
Flexbox（弹性盒子布局）是一种一维布局方法，用于在容器中排列项目。它提供了强大的对齐、分布和排序能力。
核心概念
- Flex Container（弹性容器）：设置了
display: flex的父元素 - Flex Items（弹性项目）：弹性容器的直接子元素
- Main Axis（主轴）：弹性容器的主要轴线
- Cross Axis（交叉轴）：垂直于主轴的轴线
<!-- 基础 Flexbox 示例 -->
<div class="flex bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">项目 1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">项目 2</div>
<div class="bg-red-500 text-white p-4 rounded">项目 3</div>
</div>
4.1.2 Flex 方向
<!-- 水平方向（默认） -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-row（默认）</h3>
<div class="flex flex-row bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 水平反向 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-row-reverse</h3>
<div class="flex flex-row-reverse bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded ml-2">1</div>
<div class="bg-green-500 text-white p-4 rounded ml-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 垂直方向 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-col</h3>
<div class="flex flex-col bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mb-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mb-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 垂直反向 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-col-reverse</h3>
<div class="flex flex-col-reverse bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mt-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mt-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
4.2 Flex 容器属性
4.2.1 换行控制
<!-- 不换行（默认） -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-nowrap（默认）</h3>
<div class="flex flex-nowrap bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2 w-32">项目 1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 w-32">项目 2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 w-32">项目 3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 w-32">项目 4</div>
<div class="bg-pink-500 text-white p-4 rounded w-32">项目 5</div>
</div>
</div>
<!-- 换行 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-wrap</h3>
<div class="flex flex-wrap bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2 mb-2 w-32">项目 1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 mb-2 w-32">项目 2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 mb-2 w-32">项目 3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 mb-2 w-32">项目 4</div>
<div class="bg-pink-500 text-white p-4 rounded mb-2 w-32">项目 5</div>
</div>
</div>
<!-- 反向换行 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-wrap-reverse</h3>
<div class="flex flex-wrap-reverse bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2 mt-2 w-32">项目 1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 mt-2 w-32">项目 2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 mt-2 w-32">项目 3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 mt-2 w-32">项目 4</div>
<div class="bg-pink-500 text-white p-4 rounded mt-2 w-32">项目 5</div>
</div>
</div>
4.2.2 主轴对齐（justify-content）
<!-- 起始对齐（默认） -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-start（默认）</h3>
<div class="flex justify-start bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 居中对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-center</h3>
<div class="flex justify-center bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 末尾对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-end</h3>
<div class="flex justify-end bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 两端对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-between</h3>
<div class="flex justify-between bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded">1</div>
<div class="bg-green-500 text-white p-4 rounded">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 周围分布 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-around</h3>
<div class="flex justify-around bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded">1</div>
<div class="bg-green-500 text-white p-4 rounded">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 均匀分布 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">justify-evenly</h3>
<div class="flex justify-evenly bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded">1</div>
<div class="bg-green-500 text-white p-4 rounded">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
4.2.3 交叉轴对齐（align-items）
<!-- 拉伸对齐（默认） -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">items-stretch（默认）</h3>
<div class="flex items-stretch bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 起始对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">items-start</h3>
<div class="flex items-start bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 居中对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">items-center</h3>
<div class="flex items-center bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 末尾对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">items-end</h3>
<div class="flex items-end bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-4 rounded mr-2">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2">2</div>
<div class="bg-red-500 text-white p-4 rounded">3</div>
</div>
</div>
<!-- 基线对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">items-baseline</h3>
<div class="flex items-baseline bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-2 rounded mr-2 text-sm">小文字</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 text-lg">大文字</div>
<div class="bg-red-500 text-white p-3 rounded text-base">中文字</div>
</div>
</div>
4.2.4 多行对齐（align-content）
<!-- 起始对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">content-start</h3>
<div class="flex flex-wrap content-start bg-gray-100 p-4 rounded h-48">
<div class="bg-blue-500 text-white p-4 rounded mr-2 mb-2 w-24">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 mb-2 w-24">2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 mb-2 w-24">3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 mb-2 w-24">4</div>
<div class="bg-pink-500 text-white p-4 rounded mb-2 w-24">5</div>
</div>
</div>
<!-- 居中对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">content-center</h3>
<div class="flex flex-wrap content-center bg-gray-100 p-4 rounded h-48">
<div class="bg-blue-500 text-white p-4 rounded mr-2 mb-2 w-24">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 mb-2 w-24">2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 mb-2 w-24">3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 mb-2 w-24">4</div>
<div class="bg-pink-500 text-white p-4 rounded mb-2 w-24">5</div>
</div>
</div>
<!-- 两端对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">content-between</h3>
<div class="flex flex-wrap content-between bg-gray-100 p-4 rounded h-48">
<div class="bg-blue-500 text-white p-4 rounded mr-2 mb-2 w-24">1</div>
<div class="bg-green-500 text-white p-4 rounded mr-2 mb-2 w-24">2</div>
<div class="bg-red-500 text-white p-4 rounded mr-2 mb-2 w-24">3</div>
<div class="bg-purple-500 text-white p-4 rounded mr-2 mb-2 w-24">4</div>
<div class="bg-pink-500 text-white p-4 rounded mb-2 w-24">5</div>
</div>
</div>
4.3 Flex 项目属性
4.3.1 弹性增长（flex-grow）
<!-- 基础弹性增长 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-grow</h3>
<div class="flex bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mr-2">固定</div>
<div class="flex-grow bg-green-500 text-white p-4 rounded mr-2">flex-grow</div>
<div class="bg-red-500 text-white p-4 rounded">固定</div>
</div>
</div>
<!-- 不同增长比例 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">不同增长比例</h3>
<div class="flex bg-gray-100 p-4 rounded">
<div class="flex-grow bg-blue-500 text-white p-4 rounded mr-2">flex-grow (1)</div>
<div class="flex-grow-2 bg-green-500 text-white p-4 rounded mr-2">flex-grow-2</div>
<div class="flex-grow bg-red-500 text-white p-4 rounded">flex-grow (1)</div>
</div>
</div>
4.3.2 弹性收缩（flex-shrink）
<!-- 弹性收缩 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-shrink</h3>
<div class="flex bg-gray-100 p-4 rounded">
<div class="w-64 bg-blue-500 text-white p-4 rounded mr-2">w-64 (默认收缩)</div>
<div class="w-64 flex-shrink-0 bg-green-500 text-white p-4 rounded mr-2">w-64 flex-shrink-0</div>
<div class="w-64 bg-red-500 text-white p-4 rounded">w-64 (默认收缩)</div>
</div>
</div>
4.3.3 弹性基础（flex-basis）
<!-- 弹性基础 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">flex-basis</h3>
<div class="flex bg-gray-100 p-4 rounded">
<div class="flex-1 bg-blue-500 text-white p-4 rounded mr-2">flex-1</div>
<div class="flex-auto bg-green-500 text-white p-4 rounded mr-2">flex-auto</div>
<div class="flex-none w-32 bg-red-500 text-white p-4 rounded">flex-none w-32</div>
</div>
</div>
4.3.4 单独对齐（align-self）
<!-- 单独对齐 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">align-self</h3>
<div class="flex items-center bg-gray-100 p-4 rounded h-32">
<div class="bg-blue-500 text-white p-4 rounded mr-2">默认</div>
<div class="self-start bg-green-500 text-white p-4 rounded mr-2">self-start</div>
<div class="self-end bg-red-500 text-white p-4 rounded mr-2">self-end</div>
<div class="self-stretch bg-purple-500 text-white p-4 rounded">self-stretch</div>
</div>
</div>
4.3.5 排序（order）
<!-- 排序 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">order</h3>
<div class="flex bg-gray-100 p-4 rounded">
<div class="order-3 bg-blue-500 text-white p-4 rounded mr-2">第一个 (order-3)</div>
<div class="order-1 bg-green-500 text-white p-4 rounded mr-2">第二个 (order-1)</div>
<div class="order-2 bg-red-500 text-white p-4 rounded">第三个 (order-2)</div>
</div>
</div>
4.4 常用 Flexbox 布局模式
4.4.1 水平垂直居中
<!-- 完美居中 -->
<div class="flex items-center justify-center bg-gray-100 h-64 rounded">
<div class="bg-blue-500 text-white p-8 rounded-lg">
<h3 class="text-xl font-bold mb-2">完美居中</h3>
<p>使用 flex items-center justify-center</p>
</div>
</div>
4.4.2 导航栏布局
<!-- 导航栏 -->
<nav class="flex items-center justify-between bg-white shadow-md p-4 rounded">
<!-- Logo -->
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 rounded mr-2"></div>
<span class="text-xl font-bold text-gray-800">Logo</span>
</div>
<!-- 导航链接 -->
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 hover:text-blue-500 transition duration-200">首页</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition duration-200">产品</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition duration-200">关于</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition duration-200">联系</a>
</div>
<!-- 用户操作 -->
<div class="flex items-center space-x-4">
<button class="text-gray-600 hover:text-blue-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-200">
登录
</button>
</div>
</nav>
4.4.3 卡片布局
<!-- 卡片网格 -->
<div class="flex flex-wrap -m-2">
<!-- 卡片 1 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-2">
<div class="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500"></div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-gray-800 mb-2">卡片标题 1</h3>
<p class="text-gray-600 mb-4 flex-grow">这是卡片的描述内容，可以是任意长度的文本。</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-200 self-start">
了解更多
</button>
</div>
</div>
</div>
<!-- 卡片 2 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-2">
<div class="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
<div class="h-48 bg-gradient-to-r from-green-400 to-blue-500"></div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-gray-800 mb-2">卡片标题 2</h3>
<p class="text-gray-600 mb-4 flex-grow">这是另一张卡片的描述内容，内容长度可能不同。</p>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-200 self-start">
了解更多
</button>
</div>
</div>
</div>
<!-- 卡片 3 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-2">
<div class="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
<div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500"></div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-gray-800 mb-2">卡片标题 3</h3>
<p class="text-gray-600 mb-4 flex-grow">第三张卡片的描述内容，展示了 Flexbox 如何处理不同高度的内容。</p>
<button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition duration-200 self-start">
了解更多
</button>
</div>
</div>
</div>
</div>
4.4.4 侧边栏布局
<!-- 侧边栏布局 -->
<div class="flex h-screen bg-gray-100">
<!-- 侧边栏 -->
<div class="w-64 bg-white shadow-md flex flex-col">
<!-- 侧边栏头部 -->
<div class="p-6 border-b border-gray-200">
<h2 class="text-xl font-bold text-gray-800">管理面板</h2>
</div>
<!-- 导航菜单 -->
<nav class="flex-grow p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 rounded hover:bg-blue-50 hover:text-blue-600 transition duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
仪表板
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 rounded hover:bg-blue-50 hover:text-blue-600 transition duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
</svg>
用户管理
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 rounded hover:bg-blue-50 hover:text-blue-600 transition duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
内容管理
</a>
</li>
</ul>
</nav>
<!-- 侧边栏底部 -->
<div class="p-4 border-t border-gray-200">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 rounded-full mr-3"></div>
<div>
<p class="text-sm font-medium text-gray-800">管理员</p>
<p class="text-xs text-gray-500">admin@example.com</p>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-grow flex flex-col">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm border-b border-gray-200 p-6">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800">仪表板</h1>
<div class="flex items-center space-x-4">
<button class="p-2 text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
</svg>
</button>
<button class="p-2 text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
</header>
<!-- 主内容 -->
<main class="flex-grow p-6 overflow-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 统计卡片 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">总用户数</p>
<p class="text-3xl font-bold text-gray-800">1,234</p>
</div>
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
</svg>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">总订单数</p>
<p class="text-3xl font-bold text-gray-800">567</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">总收入</p>
<p class="text-3xl font-bold text-gray-800">¥89,012</p>
</div>
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
4.4.5 媒体对象布局
<!-- 媒体对象 -->
<div class="space-y-6">
<!-- 基础媒体对象 -->
<div class="flex bg-white p-6 rounded-lg shadow-sm">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
<span class="text-white font-semibold">A</span>
</div>
</div>
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 mb-1">用户名</h3>
<p class="text-gray-600 text-sm mb-2">2小时前</p>
<p class="text-gray-700">这是一条用户发布的动态内容，展示了媒体对象布局的基本用法。</p>
</div>
</div>
<!-- 带操作的媒体对象 -->
<div class="flex bg-white p-6 rounded-lg shadow-sm">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
<span class="text-white font-semibold">B</span>
</div>
</div>
<div class="flex-grow">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-1">另一个用户</h3>
<p class="text-gray-600 text-sm mb-2">5小时前</p>
</div>
<div class="flex space-x-2">
<button class="text-gray-400 hover:text-blue-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"></path>
</svg>
</button>
<button class="text-gray-400 hover:text-red-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z"></path>
</svg>
</button>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<p class="text-gray-700">这是另一条动态内容，展示了如何在媒体对象中添加操作按钮。</p>
</div>
</div>
<!-- 嵌套媒体对象 -->
<div class="flex bg-white p-6 rounded-lg shadow-sm">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
<span class="text-white font-semibold">C</span>
</div>
</div>
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 mb-1">第三个用户</h3>
<p class="text-gray-600 text-sm mb-2">1天前</p>
<p class="text-gray-700 mb-4">这是一条带有回复的动态内容。</p>
<!-- 嵌套回复 -->
<div class="flex bg-gray-50 p-4 rounded-lg">
<div class="flex-shrink-0 mr-3">
<div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center">
<span class="text-white text-sm font-semibold">D</span>
</div>
</div>
<div class="flex-grow">
<h4 class="text-sm font-semibold text-gray-800 mb-1">回复用户</h4>
<p class="text-gray-600 text-xs mb-1">20小时前</p>
<p class="text-gray-700 text-sm">这是对上面动态的回复内容。</p>
</div>
</div>
</div>
</div>
</div>
4.5 响应式 Flexbox
4.5.1 响应式方向
<!-- 响应式方向 -->
<div class="flex flex-col md:flex-row bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mb-2 md:mb-0 md:mr-2">
移动端垂直，桌面端水平
</div>
<div class="bg-green-500 text-white p-4 rounded mb-2 md:mb-0 md:mr-2">
响应式布局
</div>
<div class="bg-red-500 text-white p-4 rounded">
自适应方向
</div>
</div>
4.5.2 响应式对齐
<!-- 响应式对齐 -->
<div class="flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mb-2 md:mb-0">
响应式对齐
</div>
<div class="bg-green-500 text-white p-4 rounded mb-2 md:mb-0">
移动端居中
</div>
<div class="bg-red-500 text-white p-4 rounded">
桌面端两端对齐
</div>
</div>
4.5.3 响应式弹性
<!-- 响应式弹性 -->
<div class="flex flex-col md:flex-row bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded mb-2 md:mb-0 md:mr-2 md:flex-1">
移动端全宽，桌面端弹性
</div>
<div class="bg-green-500 text-white p-4 rounded mb-2 md:mb-0 md:mr-2 md:w-64">
桌面端固定宽度
</div>
<div class="bg-red-500 text-white p-4 rounded md:flex-1">
移动端全宽，桌面端弹性
</div>
</div>
4.6 实践案例：响应式产品展示页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式产品展示页 - Flexbox</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-600 rounded mr-2"></div>
<span class="text-xl font-bold text-gray-900">ProductHub</span>
</div>
<!-- 桌面端导航 -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">产品</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">解决方案</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">定价</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">关于我们</a>
</div>
<!-- 操作按钮 -->
<div class="flex items-center space-x-4">
<button class="hidden md:block text-gray-700 hover:text-blue-600 transition duration-200">
登录
</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-200">
免费试用
</button>
<!-- 移动端菜单按钮 -->
<button class="md:hidden p-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="bg-gradient-to-r from-blue-600 to-purple-700 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="flex flex-col lg:flex-row items-center">
<!-- 文本内容 -->
<div class="lg:w-1/2 lg:pr-12 mb-12 lg:mb-0">
<h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
构建未来的
<span class="text-yellow-300">数字产品</span>
</h1>
<p class="text-xl mb-8 text-blue-100 leading-relaxed">
我们提供创新的解决方案，帮助您的业务在数字化时代蓬勃发展。从概念到实现，我们与您同行。
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200">
开始使用
</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-200">
了解更多
</button>
</div>
</div>
<!-- 图片/插图 -->
<div class="lg:w-1/2">
<div class="bg-white bg-opacity-10 rounded-2xl p-8 backdrop-blur-sm">
<div class="grid grid-cols-2 gap-4">
<div class="bg-white bg-opacity-20 rounded-lg h-32"></div>
<div class="bg-white bg-opacity-20 rounded-lg h-32"></div>
<div class="bg-white bg-opacity-20 rounded-lg h-32 col-span-2"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 特性展示 -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
为什么选择我们？
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
我们的产品具有以下核心优势，帮助您的业务快速增长
</p>
</div>
<!-- 特性网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 特性 1 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition duration-200">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">极速性能</h3>
<p class="text-gray-600 leading-relaxed">
采用最新技术栈，确保您的应用运行速度比竞争对手快 3 倍以上。
</p>
</div>
<!-- 特性 2 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition duration-200">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">安全可靠</h3>
<p class="text-gray-600 leading-relaxed">
企业级安全保障，通过多项国际认证，保护您的数据安全。
</p>
</div>
<!-- 特性 3 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition duration-200">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">用户友好</h3>
<p class="text-gray-600 leading-relaxed">
直观的用户界面设计，让您的团队能够快速上手，提高工作效率。
</p>
</div>
</div>
</div>
</section>
<!-- 产品展示 -->
<section class="bg-gray-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center">
<!-- 产品图片 -->
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
<div class="bg-white rounded-2xl shadow-xl p-8">
<div class="space-y-4">
<div class="flex items-center space-x-4">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
<div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
<span class="text-gray-500 text-lg">产品演示界面</span>
</div>
</div>
</div>
</div>
<!-- 产品描述 -->
<div class="lg:w-1/2">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
强大的功能，
<span class="text-blue-600">简单的操作</span>
</h2>
<p class="text-xl text-gray-600 mb-8 leading-relaxed">
我们的产品集成了最先进的功能，但保持了极简的用户体验。无论您是技术专家还是初学者，都能轻松掌握。
</p>
<!-- 功能列表 -->
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-3 h-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 mb-1">实时协作</h4>
<p class="text-gray-600">团队成员可以同时编辑和查看项目，提高协作效率。</p>
</div>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-3 h-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 mb-1">智能分析</h4>
<p class="text-gray-600">AI 驱动的数据分析，为您提供深入的业务洞察。</p>
</div>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-3 h-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 mb-1">无缝集成</h4>
<p class="text-gray-600">与您现有的工具和系统完美集成，无需重新学习。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 客户评价 -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
客户怎么说
</h2>
<p class="text-xl text-gray-600">
听听我们的客户对产品的真实评价
</p>
</div>
<!-- 评价网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 评价 1 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
</div>
<p class="text-gray-700 mb-6 leading-relaxed">
"这个产品完全改变了我们的工作方式。团队协作效率提升了 200%，强烈推荐！"
</p>
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-500 rounded-full mr-4"></div>
<div>
<p class="font-semibold text-gray-900">张三</p>
<p class="text-sm text-gray-600">技术总监，ABC 公司</p>
</div>
</div>
</div>
<!-- 评价 2 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
</div>
<p class="text-gray-700 mb-6 leading-relaxed">
"界面设计非常直观，我们的团队很快就上手了。客户支持也非常及时和专业。"
</p>
<div class="flex items-center">
<div class="w-10 h-10 bg-green-500 rounded-full mr-4"></div>
<div>
<p class="font-semibold text-gray-900">李四</p>
<p class="text-sm text-gray-600">产品经理，XYZ 科技</p>
</div>
</div>
</div>
<!-- 评价 3 -->
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
</div>
<p class="text-gray-700 mb-6 leading-relaxed">
"ROI 非常明显，投资回报率超出了我们的预期。这是我们做过的最好的技术投资。"
</p>
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-500 rounded-full mr-4"></div>
<div>
<p class="font-semibold text-gray-900">王五</p>
<p class="text-sm text-gray-600">CEO，创新企业</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA 区域 -->
<section class="bg-blue-600 py-20">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl lg:text-4xl font-bold text-white mb-6">
准备开始了吗？
</h2>
<p class="text-xl text-blue-100 mb-8 leading-relaxed">
加入数千家企业的行列，体验我们产品带来的变革
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200">
免费试用 30 天
</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-200">
联系销售
</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 公司信息 -->
<div>
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-600 rounded mr-2"></div>
<span class="text-xl font-bold">ProductHub</span>
</div>
<p class="text-gray-400 mb-4">
构建未来的数字产品，让技术为您的业务赋能。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- 产品链接 -->
<div>
<h3 class="text-lg font-semibold mb-4">产品</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">功能特性</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">定价方案</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">API 文档</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">集成指南</a></li>
</ul>
</div>
<!-- 支持链接 -->
<div>
<h3 class="text-lg font-semibold mb-4">支持</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">帮助中心</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">联系我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">状态页面</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">社区论坛</a></li>
</ul>
</div>
<!-- 公司链接 -->
<div>
<h3 class="text-lg font-semibold mb-4">公司</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">关于我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">招聘信息</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">新闻动态</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">投资者关系</a></li>
</ul>
</div>
</div>
<!-- 版权信息 -->
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">
© 2024 ProductHub. 保留所有权利。
</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-200">隐私政策</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-200">服务条款</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-200">Cookie 政策</a>
</div>
</div>
</div>
</footer>
</body>
</html>
4.7 Flexbox 最佳实践
4.7.1 性能优化
- 避免不必要的嵌套：尽量减少 Flex 容器的嵌套层级
- 合理使用 flex-grow：避免过度使用 flex-grow 导致布局不稳定
- 优先使用简写属性：使用
flex-1而不是flex-grow flex-shrink flex-basis
4.7.2 可访问性考虑
- 保持逻辑顺序：确保 HTML 结构的逻辑顺序与视觉顺序一致
- 谨慎使用 order：order 属性可能影响屏幕阅读器的阅读顺序
- 提供足够的对比度：确保文本和背景有足够的颜色对比度
4.7.3 浏览器兼容性
- 使用前缀：对于老版本浏览器，可能需要添加厂商前缀
- 测试不同浏览器：在主流浏览器中测试 Flexbox 布局
- 提供降级方案：为不支持 Flexbox 的浏览器提供替代方案
4.8 本章总结
在本章中，我们深入学习了 Flexbox 布局系统：
核心要点
- Flexbox 概念：理解主轴、交叉轴和弹性容器的概念
- 容器属性：掌握方向、换行、对齐等容器属性
- 项目属性：学会使用弹性增长、收缩和排序
- 布局模式：掌握常用的布局模式和响应式设计
最佳实践
- 合理选择 Flex 方向和对齐方式
- 使用响应式 Flexbox 创建自适应布局
- 注意性能和可访问性
- 保持代码简洁和可维护性
下一步
在下一章中，我们将学习 CSS Grid 布局系统，这是另一个强大的现代布局工具。
4.9 练习题
- 导航栏练习：创建一个响应式导航栏，在移动端显示汉堡菜单
- 卡片布局练习：使用 Flexbox 创建一个等高的卡片网格
- 圣杯布局练习：使用 Flexbox 实现经典的三栏布局
练习提示
- 先在桌面端实现，再考虑移动端适配
- 注意内容的对齐和分布
- 测试不同内容长度下的布局效果
