云南建站公司_静态网页素材_坚持_个人网站的制作

Flex 布局基础

1. Flex 容器设置

<!-- 基础 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>

2. 主轴对齐

<!-- 主轴对齐方式 -->
<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>

3. 交叉轴对齐

<!-- 交叉轴对齐 -->
<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>

Flex 实战案例

1. 导航栏布局

<!-- 响应式导航栏 -->
<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>

2. 卡片网格布局

<!-- 使用 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>

Grid 布局基础

1. Grid 容器设置

<!-- 基础网格 -->
<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>

2. 网格列配置

<!-- 自定义列宽 -->
<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>

Grid 实战案例

1. 图片画廊

<!-- 响应式图片画廊 -->
<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>

2. 仪表板布局

<!-- 仪表板网格布局 -->
<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>

混合布局技巧

1. Flex 和 Grid 结合

<!-- 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>

2. 响应式布局切换

<!-- 响应式布局切换 -->
<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>

高级布局技巧

1. 自适应布局

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

2. 特殊布局效果

<!-- 交错网格布局 -->
<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>