Muliminty Note

01-布局系统

8分钟阅读

Tailwind CSS 布局系统

使用 Tailwind CSS 的布局工具类快速构建各种布局。

1. Flexbox 布局

1.1 基础 Flex 容器

<!-- 启用 Flexbox -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

1.2 方向控制

<!-- 水平方向（默认） -->
<div class="flex flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 垂直方向 -->
<div class="flex flex-col">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 反向 -->
<div class="flex flex-row-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

1.3 对齐方式

主轴对齐（justify-content）

<!-- 起始对齐 -->
<div class="flex justify-start">
  <div>项目</div>
</div>
 
<!-- 居中对齐 -->
<div class="flex justify-center">
  <div>项目</div>
</div>
 
<!-- 末端对齐 -->
<div class="flex justify-end">
  <div>项目</div>
</div>
 
<!-- 两端对齐 -->
<div class="flex justify-between">
  <div>左侧</div>
  <div>右侧</div>
</div>
 
<!-- 均匀分布 -->
<div class="flex justify-around">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 均匀间距 -->
<div class="flex justify-evenly">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

交叉轴对齐（align-items）

<!-- 起始对齐 -->
<div class="flex items-start">
  <div>项目</div>
</div>
 
<!-- 居中对齐 -->
<div class="flex items-center">
  <div>项目</div>
</div>
 
<!-- 末端对齐 -->
<div class="flex items-end">
  <div>项目</div>
</div>
 
<!-- 拉伸 -->
<div class="flex items-stretch">
  <div>项目</div>
</div>

1.4 换行

<!-- 不换行（默认） -->
<div class="flex flex-nowrap">
  <div>项目</div>
</div>
 
<!-- 换行 -->
<div class="flex flex-wrap">
  <div>项目</div>
</div>
 
<!-- 反向换行 -->
<div class="flex flex-wrap-reverse">
  <div>项目</div>
</div>

1.5 Flex 项目属性

<!-- 不缩放 -->
<div class="flex">
  <div class="flex-none">固定宽度</div>
  <div>自动宽度</div>
</div>
 
<!-- 自动缩放 -->
<div class="flex">
  <div class="flex-auto">自动缩放</div>
  <div>其他内容</div>
</div>
 
<!-- 等比例缩放 -->
<div class="flex">
  <div class="flex-1">占满剩余空间</div>
  <div class="flex-1">占满剩余空间</div>
</div>

1.6 常用 Flex 模式

<!-- 水平居中 -->
<div class="flex items-center justify-center">
  <div>居中内容</div>
</div>
 
<!-- 垂直居中 -->
<div class="flex items-center justify-center h-screen">
  <div>居中内容</div>
</div>
 
<!-- 两端对齐 -->
<div class="flex items-center justify-between">
  <div>左侧</div>
  <div>右侧</div>
</div>
 
<!-- 等间距 -->
<div class="flex items-center gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

2. Grid 布局

2.1 基础 Grid

<!-- 启用 Grid -->
<div class="grid">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

2.2 列定义

<!-- 固定列数 -->
<div class="grid grid-cols-3">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
 
<!-- 自动列数 -->
<div class="grid grid-cols-auto">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 响应式列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

2.3 行定义

<!-- 固定行数 -->
<div class="grid grid-rows-3">
  <div>行 1</div>
  <div>行 2</div>
  <div>行 3</div>
</div>
 
<!-- 自动行 -->
<div class="grid grid-rows-auto">
  <div>行 1</div>
  <div>行 2</div>
</div>

2.4 间距

<!-- 列间距 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
 
<!-- 行间距 -->
<div class="grid grid-rows-3 gap-y-4">
  <div>行 1</div>
  <div>行 2</div>
  <div>行 3</div>
</div>
 
<!-- 行列间距 -->
<div class="grid grid-cols-3 gap-x-4 gap-y-2">
  <div>项目</div>
</div>

2.5 项目定位

<!-- 跨列 -->
<div class="grid grid-cols-3">
  <div class="col-span-2">跨 2 列</div>
  <div>项目</div>
</div>
 
<!-- 跨行 -->
<div class="grid grid-rows-3">
  <div class="row-span-2">跨 2 行</div>
  <div>项目</div>
</div>
 
<!-- 指定位置 -->
<div class="grid grid-cols-3">
  <div class="col-start-2 col-end-4">从第 2 列到第 4 列</div>
</div>

2.6 常用 Grid 模式

<!-- 卡片网格 -->
<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">卡片 1</div>
  <div class="bg-white rounded-lg shadow-md p-6">卡片 2</div>
  <div class="bg-white rounded-lg shadow-md p-6">卡片 3</div>
</div>
 
<!-- 仪表板布局 -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-8">主内容</div>
  <div class="col-span-12 md:col-span-4">侧边栏</div>
</div>

3. 定位

3.1 定位类型

<!-- 相对定位 -->
<div class="relative">
  <div class="absolute top-0 right-0">绝对定位</div>
</div>
 
<!-- 绝对定位 -->
<div class="absolute top-4 left-4">
  绝对定位元素
</div>
 
<!-- 固定定位 -->
<div class="fixed top-0 left-0 w-full">
  固定定位（如导航栏）
</div>
 
<!-- 粘性定位 -->
<div class="sticky top-0">
  粘性定位（滚动时固定）
</div>

3.2 位置属性

<!-- 上 -->
<div class="top-0">顶部</div>
<div class="top-4">距离顶部 1rem</div>
 
<!-- 右 -->
<div class="right-0">右侧</div>
<div class="right-4">距离右侧 1rem</div>
 
<!-- 下 -->
<div class="bottom-0">底部</div>
<div class="bottom-4">距离底部 1rem</div>
 
<!-- 左 -->
<div class="left-0">左侧</div>
<div class="left-4">距离左侧 1rem</div>

3.3 居中定位

<!-- 水平垂直居中 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
  居中内容
</div>
 
<!-- 使用 inset -->
<div class="absolute inset-0 flex items-center justify-center">
  居中内容
</div>

4. 容器查询

4.1 容器类型

<!-- 定义容器 -->
<div class="@container">
  <div class="@lg:grid-cols-3">
    <!-- 当容器宽度 >= lg 时显示 3 列 -->
  </div>
</div>

4.2 容器查询断点

<div class="@container">
  <div class="@sm:text-lg">
    小容器时大字体
  </div>
  <div class="@md:flex">
    中等容器时 Flex 布局
  </div>
</div>

5. 显示控制

5.1 显示类型

<!-- 块级元素 -->
<div class="block">块级</div>
 
<!-- 行内元素 -->
<span class="inline">行内</span>
 
<!-- 行内块 -->
<div class="inline-block">行内块</div>
 
<!-- Flex -->
<div class="flex">Flex</div>
 
<!-- Grid -->
<div class="grid">Grid</div>
 
<!-- 隐藏 -->
<div class="hidden">隐藏</div>

5.2 响应式显示

<!-- 移动端隐藏，桌面端显示 -->
<div class="hidden md:block">
  仅桌面端显示
</div>
 
<!-- 移动端显示，桌面端隐藏 -->
<div class="block md:hidden">
  仅移动端显示
</div>

6. 尺寸控制

6.1 宽度

<!-- 固定宽度 -->
<div class="w-64">宽度 16rem</div>
 
<!-- 百分比 -->
<div class="w-1/2">50% 宽度</div>
<div class="w-full">100% 宽度</div>
 
<!-- 最大宽度 -->
<div class="max-w-md">最大宽度 28rem</div>
<div class="max-w-7xl mx-auto">居中容器</div>
 
<!-- 最小宽度 -->
<div class="min-w-0">最小宽度 0</div>

6.2 高度

<!-- 固定高度 -->
<div class="h-64">高度 16rem</div>
 
<!-- 百分比 -->
<div class="h-full">100% 高度</div>
<div class="h-screen">视口高度</div>
 
<!-- 最大高度 -->
<div class="max-h-96">最大高度 24rem</div>
 
<!-- 最小高度 -->
<div class="min-h-screen">最小高度视口</div>

7. 溢出控制

<!-- 溢出隐藏 -->
<div class="overflow-hidden">
  溢出内容隐藏
</div>
 
<!-- 溢出滚动 -->
<div class="overflow-auto">
  溢出时显示滚动条
</div>
 
<!-- 水平滚动 -->
<div class="overflow-x-auto">
  水平滚动
</div>
 
<!-- 垂直滚动 -->
<div class="overflow-y-auto">
  垂直滚动
</div>

8. 实战案例

8.1 响应式导航栏

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <h1 class="text-xl font-bold">Logo</h1>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
      </div>
      <button class="md:hidden">菜单</button>
    </div>
  </div>
</nav>

8.2 卡片网格

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

8.3 侧边栏布局

<div class="flex">
  <!-- 侧边栏 -->
  <aside class="w-64 bg-gray-100 p-4 hidden md:block">
    <nav>
      <a href="#" class="block py-2">菜单项 1</a>
      <a href="#" class="block py-2">菜单项 2</a>
    </nav>
  </aside>
  
  <!-- 主内容 -->
  <main class="flex-1 p-4">
    <h1 class="text-2xl font-bold mb-4">主内容</h1>
    <p>内容区域</p>
  </main>
</div>

9. 下一步

现在你已经掌握了 Tailwind CSS 的布局系统，可以：

  1. 学习 间距系统
  2. 查看 实战应用
  3. 实践构建复杂布局

相关链接：

TailwindCSS 布局 Flexbox Grid

关系图谱

反向链接