1. Flex 布局（最常用）

基础 Flex 容器

<div class=“flex”> <!-- 创建 flex 容器 -->
<div class=“flex-1”> <!-- flex-1 表示占用所有剩余空间 -->

常用 Flex 属性

• `flex`: flex 容器
• `flex-row`: 水平方向（默认）
• `flex-col`: 垂直方向
• `flex-wrap`: 允许换行
• `flex-nowrap`: 不换行（默认）

主轴对齐（justify）

• `justify-start`: 左对齐（默认）
• `justify-end`: 右对齐
• `justify-center`: 居中对齐
• `justify-between`: 两端对齐，项目之间间隔相等
• `justify-around`: 项目两侧间隔相等

交叉轴对齐（align）

• `items-start`: 顶部对齐
• `items-center`: 居中对齐
• `items-end`: 底部对齐
• `items-stretch`: 拉伸对齐（默认）

2. Grid 布局

基础网格布局

<div class=“grid”> 
<!-- 创建 grid 容器 -->

常用网格列定义

• `grid-cols-1`: 1列
• `grid-cols-2`: 2列
• `grid-cols-3`: 3列
• `grid-cols-4`: 4列
• `sm:grid-cols-2`: 小屏幕以上2列

网格间距

• `gap-4`: 统一间距
• `gap-x-4`: 水平间距
• `gap-y-4`: 垂直间距

3. 间距和边距

内边距 padding

• `p-4`: 所有方向内边距
• `px-4`: 左右内边距
• `py-4`: 上下内边距
• `pt-4`: 上内边距
• `pr-4`: 右内边距
• `pb-4`: 下内边距
• `pl-4`: 左内边距

外边距 margin

• `m-4`: 所有方向外边距
• `mx-4`: 左右外边距
• `my-4`: 上下外边距
• `mt-4`: 上外边距
• `mr-4`: 右外边距
• `mb-4`: 下外边距
• `ml-4`: 左外边距

4. 响应式设计

响应式前缀

• `sm:`: 640px 以上
• `md:`: 768px 以上
• `lg:`: 1024px 以上
• `xl:`: 1280px 以上
• `2xl:`: 1536px 以上

示例

<div class=“w-full md:w-1/2 lg:w-1/3”>
<!-- 小屏全宽，中屏半宽，大屏三分之一宽 -->
</div>

5. 定位

定位类型

• `relative`: 相对定位
• `absolute`: 绝对定位
• `fixed`: 固定定位
• `sticky`: 粘性定位

位置控制

• `inset-0`: 上下左右都是 0
• `top-0`: 顶部 0
• `right-0`: 右侧 0
• `bottom-0`: 底部 0
• `left-0`: 左侧 0

常用定位组合

<div class=“fixed inset-0”> 
<!-- 固定定位，铺满屏幕 -->
<div class=“absolute top-0 right-0”> 
<!-- 绝对定位，右上角 -->

6. 容器和尺寸

宽度

• `w-full`: 100%宽度
• `w-screen`: 视窗宽度
• `w-1/2`: 50%宽度
• `w-1/3`: 33.33%宽度
• `w-1/4`: 25%宽度

高度

• `h-full`: 100%高度
• `h-screen`: 视窗高度
• `h-1/2`: 50%高度

7. 常用组合示例

居中布局

<div class=“flex items-center justify-center”>
<!-- 水平垂直居中 -->
</div>

卡片布局

<div class=“p-4 rounded-lg shadow-md”>
<!-- 带内边距和圆角的卡片 -->
</div>

响应式网格

<div class=“grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4”>
<!-- 响应式网格布局 -->
</div>

固定页头

<header class=“fixed top-0 w-full bg-white shadow-md”>
<!-- 固定在顶部的页头 -->
</header>

实用技巧

1. 使用 `space-x-4` 和 `space-y-4` 可以快速为子元素添加间距
2. 使用 `container mx-auto` 创建居中的响应式容器
3. 使用 `aspect-ratio` 控制元素比例
4. 使用 `overflow-hidden` 配合 `text-ellipsis` 处理文本溢出​

开发案例​

1. ​​容器（Container）​​

用于限制内容的最大宽度并水平居中，响应式适配不同屏幕。

<div class="container mx-auto px-4">
  <!-- 内容 -->
</div>

• container : 设置最大宽度（根据断点变化）。
• mx-auto : 水平居中。
• px-4 : 添加左右内边距（防止内容贴边）。

2. ​​Flexbox 布局​​

快速实现弹性布局，控制子元素排列和对齐。

示例：导航栏

<nav class="flex justify-between items-center bg-gray-100 p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex space-x-4">
    <a href="#" class="hover:text-blue-600">Home</a>
    <a href="#" class="hover:text-blue-600">About</a>
  </div>
</nav>

• flex : 启用 Flex 容器。
• justify-between : 子元素左右两端对齐。
• items-center : 垂直居中对齐。
• space-x-4 : 子元素间水平间距为 1rem 。

3. ​​Grid 布局​​

创建二维网格系统，适合复杂布局。

示例：卡片网格

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-4 shadow-lg">Card 1</div>
  <div class="bg-white p-4 shadow-lg">Card 2</div>
  <div class="bg-white p-4 shadow-lg">Card 3</div>
</div>

• grid : 启用 Grid 容器。
• grid-cols-{n} : 定义列数（ md: 和 lg: 是响应式断点）。
• gap-6 : 网格间距为 1.5rem 。

4. ​​定位（Positioning）​​

控制元素的位置和层级。

示例：悬浮按钮

<div class="relative h-32 bg-gray-200">
  <button class="absolute bottom-4 right-4 bg-blue-600 text-white p-2 rounded-full">
    +
  </button>
</div>

• relative : 父容器设为相对定位。
• absolute : 按钮绝对定位。
• bottom-4 / right-4 : 距离底部和右侧 1rem 。

5. ​​间距（Spacing）​​

通过 margin 和 padding 控制元素间距。

示例：带间距的段落

<div class="p-6">
  <p class="mb-4">段落1（下方有 1rem 间距）</p>
  <p class="mb-4">段落2</p>
</div>

• p-6 : 父容器内边距为 1.5rem 。
• mb-4 : 段落下方外边距为 1rem 。

6. ​​响应式设计​​

通过断点前缀适配不同设备。

示例：移动端优先的隐藏菜单

<!-- 移动端隐藏，大屏显示 -->
<div class="hidden md:flex space-x-4">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
</div>

• hidden : 默认隐藏。
• md:flex : 在中等屏幕（≥768px）显示为 Flex 容器。

7. ​​宽度与高度​​

快速设置元素尺寸。

示例：全屏背景

<div class="w-full h-screen bg-gray-100">
  <!-- 占满整个视口高度 -->
</div>

• w-full : 宽度 100%。
• h-screen : 高度为视口高度。

8. ​​空间间隔（Space Between）​​

自动为子元素添加间距。

<div class="flex space-x-4">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

• space-x-4 : 子元素水平间距为 1rem （无需单独设置 margin ）。

总结

Tailwind CSS 通过实用类名简化了布局开发：

• ​​Flexbox/Grid​​：处理元素排列和对齐。
• ​​容器/间距​​：控制内容宽度和内外边距。
• ​​响应式设计​​：通过断点适配不同设备。
• ​​定位与尺寸​​：精确控制元素位置和大小。