布局系统

Tailwind CSS 提供了强大的布局工具类，包括 Flexbox、Grid、容器等。本章将详细介绍如何使用这些工具类构建页面布局。

容器

容器是布局的基础，用于限制内容最大宽度并居中显示。

基本用法

<div class="container mx-auto">
  内容会被限制在最大宽度内，并水平居中
</div>

container 类会根据当前断点自动调整最大宽度：

断点	最大宽度
默认	100%
sm (640px)	640px
md (768px)	768px
lg (1024px)	1024px
xl (1280px)	1280px
2xl (1536px)	1536px

居中容器

<div class="container mx-auto px-4">
  带有水平内边距的居中容器
</div>

Flexbox 布局

Flexbox 是最常用的布局方式，Tailwind 提供了完整的 Flexbox 工具类。

启用 Flexbox

<div class="flex">
  这是一个 Flex 容器
</div>

<div class="inline-flex">
  这是一个行内 Flex 容器
</div>

主轴方向

控制子元素的排列方向：

<div class="flex flex-row">
  水平排列（默认）
</div>

<div class="flex flex-row-reverse">
  水平反向排列
</div>

<div class="flex flex-col">
  垂直排列
</div>

<div class="flex flex-col-reverse">
  垂直反向排列
</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-baseline">基线对齐</div>
<div class="flex items-stretch">拉伸填充</div>

水平垂直居中

最常见的居中布局：

<div class="flex items-center justify-center h-64 bg-gray-100">
  <div class="bg-blue-500 text-white p-4">
    水平垂直居中
  </div>
</div>

换行

控制子元素是否换行：

<div class="flex flex-wrap">
  子元素会自动换行
</div>

<div class="flex flex-nowrap">
  子元素不换行（默认）
</div>

<div class="flex flex-wrap-reverse">
  反向换行
</div>

子元素控制

控制单个子元素的行为：

<div class="flex">
  <div class="flex-1">占据剩余空间</div>
  <div class="flex-none">不伸缩</div>
  <div class="flex-grow">放大填充</div>
  <div class="shrink-0">不缩小</div>
</div>

间距控制

使用 gap 控制子元素间距：

<div class="flex gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<div class="flex gap-x-4">
  只控制水平间距
</div>

<div class="flex flex-col gap-y-4">
  只控制垂直间距
</div>

Grid 布局

Grid 布局适合二维布局场景，Tailwind 提供了完整的 Grid 工具类。

基本网格

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
  <div class="bg-blue-500 p-4">5</div>
  <div class="bg-blue-500 p-4">6</div>
</div>

指定列数

<div class="grid grid-cols-1">一列</div>
<div class="grid grid-cols-2">两列</div>
<div class="grid grid-cols-3">三列</div>
<div class="grid grid-cols-4">四列</div>
<div class="grid grid-cols-6">六列</div>
<div class="grid grid-cols-12">十二列</div>

指定行数

<div class="grid grid-rows-3">
  三行布局
</div>

跨列和跨行

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-500 p-4">跨两列</div>
  <div class="bg-blue-500 p-4">单列</div>
  <div class="col-span-3 bg-green-500 p-4">跨三列</div>
</div>

<div class="grid grid-rows-3 grid-cols-2 gap-4">
  <div class="row-span-2 bg-blue-500 p-4">跨两行</div>
  <div class="bg-blue-500 p-4">单行</div>
  <div class="bg-blue-500 p-4">单行</div>
  <div class="bg-green-500 p-4">单行</div>
</div>

网格对齐

<div class="grid grid-cols-3 justify-items-start">
  子元素起点对齐
</div>

<div class="grid grid-cols-3 justify-items-center">
  子元素居中对齐
</div>

<div class="grid grid-cols-3 justify-items-end">
  子元素终点对齐
</div>

<div class="grid grid-cols-3 place-items-center">
  子元素水平垂直居中
</div>

自动填充

<div class="grid grid-cols-auto-fit gap-4">
  自动填充列
</div>

<div class="grid grid-cols-auto-fill gap-4">
  自动填充列（空白保留）
</div>

定位

Tailwind 提供了完整的定位工具类。

定位类型

<div class="static">静态定位（默认）</div>
<div class="relative">相对定位</div>
<div class="absolute">绝对定位</div>
<div class="fixed">固定定位</div>
<div class="sticky">粘性定位</div>

偏移量

<div class="relative">
  <div class="absolute top-0 left-0">
    定位在左上角
  </div>
  <div class="absolute top-0 right-0">
    定位在右上角
  </div>
  <div class="absolute bottom-0 left-0">
    定位在左下角
  </div>
  <div class="absolute bottom-0 right-0">
    定位在右下角
  </div>
  <div class="absolute inset-0">
    填满父容器
  </div>
</div>

层级控制

使用 z-index 控制元素的堆叠顺序：

<div class="z-0">层级 0</div>
<div class="z-10">层级 10</div>
<div class="z-20">层级 20</div>
<div class="z-30">层级 30</div>
<div class="z-40">层级 40</div>
<div class="z-50">层级 50</div>

显示与隐藏

显示类型

<div class="block">块级元素</div>
<div class="inline-block">行内块元素</div>
<div class="inline">行内元素</div>
<div class="hidden">隐藏元素</div>

可见性

<div class="visible">可见</div>
<div class="invisible">不可见（但占据空间）</div>

透明度

<div class="opacity-0">完全透明</div>
<div class="opacity-50">半透明</div>
<div class="opacity-100">完全不透明</div>

溢出处理

控制内容溢出时的行为：

<div class="overflow-auto">自动滚动</div>
<div class="overflow-hidden">隐藏溢出内容</div>
<div class="overflow-visible">显示溢出内容</div>
<div class="overflow-scroll">始终显示滚动条</div>

<div class="overflow-x-auto">水平滚动</div>
<div class="overflow-y-auto">垂直滚动</div>

实战示例

导航栏布局

<nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Logo</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white">
      菜单
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4">
        首页
      </a>
      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4">
        关于
      </a>
      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white">
        联系
      </a>
    </div>
  </div>
</nav>

卡片网格布局

<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-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容描述</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容描述</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600">卡片内容描述</p>
  </div>
</div>

页脚布局

<footer class="bg-gray-800 text-white py-12">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/4 px-4 mb-8">
        <h4 class="text-lg font-semibold mb-4">关于我们</h4>
        <p class="text-gray-400">公司简介和描述信息</p>
      </div>
      <div class="w-full md:w-1/4 px-4 mb-8">
        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
        <ul class="text-gray-400">
          <li class="mb-2"><a href="#">首页</a></li>
          <li class="mb-2"><a href="#">产品</a></li>
          <li class="mb-2"><a href="#">服务</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 px-4 mb-8">
        <h4 class="text-lg font-semibold mb-4">联系方式</h4>
        <ul class="text-gray-400">
          <li class="mb-2">电话：123-456-7890</li>
          <li class="mb-2">邮箱：[email protected]</li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 px-4 mb-8">
        <h4 class="text-lg font-semibold mb-4">关注我们</h4>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">微信</a>
          <a href="#" class="text-gray-400 hover:text-white">微博</a>
        </div>
      </div>
    </div>
  </div>
</footer>

小结

本章介绍了 Tailwind CSS 的布局系统：

• 容器：限制内容宽度并居中
• Flexbox：一维布局的首选，适合导航栏、卡片列表等
• Grid：二维布局的首选，适合复杂网格结构
• 定位：控制元素在页面中的位置
• 显示与隐藏：控制元素的可见性
• 溢出处理：处理内容超出容器的情况

下一章，我们将学习 Tailwind CSS 的排版样式。