布局系统

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 的排版样式。

容器查询

容器查询是 CSS 的新特性，允许组件根据其容器的大小而非视口大小来应用样式。Tailwind CSS v4 内置支持容器查询，无需额外插件。

基本概念

传统的响应式设计基于视口宽度，这意味着同一个组件在不同位置会呈现相同的样式。而容器查询让组件能够根据其父容器的大小自适应，这对于构建可复用的组件库特别有用。

定义容器

使用 @container 将元素标记为查询容器：

<div class="@container">
  <!-- 这个元素现在是容器查询的参考点 -->
  <div class="flex flex-col @md:flex-row">
    小容器时纵向排列，中等容器时横向排列
  </div>
</div>

容器断点

Tailwind 提供了一系列容器断点，使用 @ 前缀：

前缀	最小宽度
@3xs	16rem (256px)
@2xs	18rem (288px)
@xs	20rem (320px)
@sm	24rem (384px)
@md	28rem (448px)
@lg	32rem (512px)
@xl	36rem (576px)
@2xl	42rem (672px)
@3xl	48rem (768px)
@4xl	56rem (896px)
@5xl	64rem (1024px)
@6xl	72rem (1152px)
@7xl	80rem (1280px)

容器查询示例

响应式卡片组件：

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 h-48 object-cover rounded-lg" src="image.jpg" alt="">
    <div class="flex-1">
      <h3 class="text-lg font-semibold">卡片标题</h3>
      <p class="text-gray-600 mt-2">卡片描述内容，根据容器宽度自动调整布局。</p>
    </div>
  </div>
</div>

响应式网格组件：

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @2xl:grid-cols-4 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>
</div>

命名容器

当有嵌套容器时，可以使用命名容器来指定查询目标：

<div class="@container/main">
  <div class="@container/sidebar">
    <!-- 查询 sidebar 容器 -->
    <div class="@lg/sidebar:bg-gray-100 p-4">
      侧边栏内容
    </div>
  </div>
  
  <!-- 查询 main 容器 -->
  <div class="@lg/main:grid-cols-2 grid gap-4">
    主内容区域
  </div>
</div>

容器大小限制

使用 @max-{size} 限制容器查询的最大范围：

<div class="@container @max-md:@lg:flex-row">
  仅在容器小于 md 时响应 @lg 断点
</div>

容器查询与媒体查询的区别

特性	媒体查询	容器查询
参照对象	视口（浏览器窗口）	父容器
适用场景	页面级布局	组件级布局
组件复用性	受页面位置影响	不受页面位置影响
响应速度	窗口大小变化时触发	容器大小变化时触发

最佳实践

容器查询最适合以下场景：

1. 组件库开发：组件可以在任何上下文中使用，无需修改样式
2. 响应式侧边栏：侧边栏中的组件根据侧边栏宽度自适应
3. 卡片网格：卡片根据所在列的宽度自动调整布局
4. 仪表盘布局：面板中的内容根据面板大小调整

<!-- 可复用的卡片组件 -->
<template id="card-template">
  <div class="@container bg-white rounded-lg shadow-md overflow-hidden">
    <div class="flex flex-col @sm:flex-row">
      <img class="w-full @sm:w-32 h-32 object-cover" src="thumb.jpg" alt="">
      <div class="p-4">
        <h3 class="font-semibold">标题</h3>
        <p class="text-sm text-gray-600 mt-1">描述</p>
      </div>
    </div>
  </div>
</template>