第二章：基础概念精讲 - 第五节 - Tailwind CSS Flex 和 Grid 布局实战

<!-- 基础 Flex 容器 -->
<div class="flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- 行/列方向 -->
<div class="flex flex-row">行布局</div>
<div class="flex flex-col">列布局</div>

<!-- 换行控制 -->
<div class="flex flex-wrap">允许换行</div>
<div class="flex flex-nowrap">禁止换行</div>

<!-- 主轴对齐方式 -->
<div class="flex justify-start">左对齐</div>
<div class="flex justify-center">居中对齐</div>
<div class="flex justify-end">右对齐</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex justify-around">环绕对齐</div>
<div class="flex justify-evenly">均匀对齐</div>

<!-- 交叉轴对齐 -->
<div class="flex items-start">顶部对齐</div>
<div class="flex items-center">居中对齐</div>
<div class="flex items-end">底部对齐</div>
<div class="flex items-stretch">拉伸对齐</div>
<div class="flex items-baseline">基线对齐</div>

<!-- 响应式导航栏 -->
<nav class="flex items-center justify-between p-4 bg-white shadow">
    <!-- Logo -->
    <div class="flex items-center">
        <img class="h-8 w-auto" src="logo.svg" alt="Logo">
    </div>

    <!-- 导航链接 -->
    <div class="hidden md:flex items-center space-x-4">
        <a href="#" class="text-gray-700 hover:text-gray-900">首页</a>
        <a href="#" class="text-gray-700 hover:text-gray-900">产品</a>
        <a href="#" class="text-gray-700 hover:text-gray-900">服务</a>
        <a href="#" class="text-gray-700 hover:text-gray-900">关于</a>
    </div>

    <!-- 用户菜单 -->
    <div class="flex items-center space-x-4">
        <button class="bg-blue-500 text-white px-4 py-2 rounded">登录</button>
    </div>
</nav>

<!-- 使用 Flex 实现卡片网格 -->
<div class="flex flex-wrap -mx-4">
    <!-- 卡片项 -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-48 object-cover" src="image.jpg" alt="Card">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">卡片标题</h3>
                <p class="text-gray-600">卡片描述内容</p>
            </div>
        </div>
    </div>
    <!-- 更多卡片... -->
</div>

<!-- 基础网格 -->
<div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- 网格项 -->
</div>

<!-- 自定义列宽 -->
<div class="grid grid-cols-12 gap-4">
    <div class="col-span-4">跨越4列</div>
    <div class="col-span-8">跨越8列</div>
</div>

<!-- 自动填充列 -->
<div class="grid grid-cols-auto-fit min-w-[200px] gap-4">
    <!-- 自动填充的网格项 -->
</div>

<!-- 响应式图片画廊 -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- 图片项 -->
    <div class="relative group">
        <img class="w-full h-64 object-cover rounded" src="image1.jpg" alt="Gallery">
        <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
            <span class="text-white text-lg">查看详情</span>
        </div>
    </div>
    <!-- 更多图片... -->
</div>

<!-- 仪表板网格布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <!-- 统计卡片 -->
    <div class="bg-white p-6 rounded-lg shadow">
        <h4 class="text-gray-500 text-sm font-medium">总收入</h4>
        <div class="mt-2 flex items-center justify-between">
            <div class="text-3xl font-bold">$23,456</div>
            <div class="text-green-500">+14%</div>
        </div>
    </div>
    <!-- 更多统计卡片... -->
</div>

<!-- Flex 和 Grid 混合使用 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- 左侧 Flex 布局 -->
    <div class="flex flex-col space-y-4">
        <h2 class="text-2xl font-bold">标题</h2>
        <p class="text-gray-600">描述文本</p>
        <div class="flex space-x-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded">按钮1</button>
            <button class="border border-blue-500 text-blue-500 px-4 py-2 rounded">按钮2</button>
        </div>
    </div>

    <!-- 右侧 Grid 布局 -->
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">特性 1</div>
        <div class="bg-gray-100 p-4 rounded">特性 2</div>
        <div class="bg-gray-100 p-4 rounded">特性 3</div>
        <div class="bg-gray-100 p-4 rounded">特性 4</div>
    </div>
</div>

<!-- 响应式布局切换 -->
<div class="flex flex-col md:grid md:grid-cols-3 gap-6">
    <!-- 在移动端使用 Flex 列布局，在桌面端切换为 Grid 布局 -->
    <div class="bg-white p-6 rounded-lg shadow">内容 1</div>
    <div class="bg-white p-6 rounded-lg shadow">内容 2</div>
    <div class="bg-white p-6 rounded-lg shadow">内容 3</div>
</div>

<!-- 自适应内容布局 -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
    <!-- 自动适应屏幕宽度的网格项 -->
</div>

<!-- 交错网格布局 -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
    <div class="md:col-span-2 row-span-2">大图</div>
    <div>小图 1</div>
    <div>小图 2</div>
    <!-- 更多网格项... -->
</div>