TailwindCSS 如何实现复杂的布局？ - 面试题

TailwindCSS 提供了多种布局工具，包括 Flexbox、Grid、定位等，可以快速构建复杂的页面布局。

Flexbox 布局

基础 Flex 容器

html
<!-- 创建 Flex 容器 -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

Flex 方向

html
<!-- 水平方向（默认） -->
<div class="flex flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 垂直方向 -->
<div class="flex flex-col">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

Flex 换行

html
<!-- 不换行（默认） -->
<div class="flex flex-nowrap">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 换行 -->
<div class="flex flex-wrap">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

主轴对齐

html
<!-- 左对齐（默认） -->
<div class="flex justify-start">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 居中对齐 -->
<div class="flex justify-center">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 右对齐 -->
<div class="flex justify-end">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 两端对齐 -->
<div class="flex justify-between">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 均匀分布 -->
<div class="flex justify-around">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

交叉轴对齐

html
<!-- 顶部对齐 -->
<div class="flex items-start">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 垂直居中 -->
<div class="flex items-center">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 底部对齐 -->
<div class="flex items-end">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 拉伸填充 -->
<div class="flex items-stretch">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

Flex 项目属性

html
<!-- flex-grow: 0（默认） -->
<div class="flex-none">
  不伸缩的项目
</div>

<!-- flex-grow: 1 -->
<div class="flex-1">
  伸缩的项目
</div>

<!-- 自定义 flex-grow -->
<div class="flex-grow-2">
  自定义伸缩比例
</div>

Grid 布局

基础 Grid 容器

html
<!-- 创建 Grid 容器 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

响应式 Grid

html
<!-- 响应式列数 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

Grid 间距

html
<!-- 行间距和列间距相同 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 分别设置行间距和列间距 -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

Grid 跨度

html
<!-- 跨列 -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">跨 2 列</div>
  <div>项目 2</div>
</div>

<!-- 跨行 -->
<div class="grid grid-rows-3 gap-4">
  <div class="row-span-2">跨 2 行</div>
  <div>项目 2</div>
</div>

Grid 模板

html
<!-- 自定义网格模板 -->
<div class="grid grid-cols-[200px_1fr_100px] gap-4">
  <div>固定宽度</div>
  <div>自适应</div>
  <div>固定宽度</div>
</div>

定位布局

相对定位

html
<div class="relative">
  <div class="absolute top-0 left-0">
    绝对定位的元素
  </div>
  相对定位的容器
</div>

绝对定位

html
<div class="absolute top-4 right-4">
  右上角的元素
</div>

固定定位

html
<div class="fixed bottom-4 right-4">
  固定在右下角的按钮
</div>

粘性定位

html
<div class="sticky top-0">
  粘性头部
</div>

实用布局示例

居中布局

html
<!-- 水平垂直居中 -->
<div class="flex items-center justify-center h-screen">
  <div>居中的内容</div>
</div>

<!-- 使用 Grid 居中 -->
<div class="grid place-items-center h-screen">
  <div>居中的内容</div>
</div>

圣杯布局

html
<div class="flex flex-col min-h-screen">
  <!-- 头部 -->
  <header class="bg-blue-500 text-white p-4">
    头部
  </header>
  
  <!-- 主体 -->
  <main class="flex flex-1">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-gray-200 p-4">
      侧边栏
    </aside>
    
    <!-- 内容区域 -->
    <div class="flex-1 p-4">
      主要内容
    </div>
  </main>
  
  <!-- 底部 -->
  <footer class="bg-gray-800 text-white p-4">
    底部
  </footer>
</div>

卡片网格

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容</p>
  </div>
</div>

布局最佳实践

移动优先：先设计移动端布局，然后添加断点
语义化 HTML：使用正确的 HTML 标签（header、main、aside、footer）
合理使用 Flex 和 Grid：Flex 适合一维布局，Grid 适合二维布局
避免过度嵌套：保持 DOM 结构简洁
测试响应式：在不同屏幕尺寸下测试布局效果