Flexbox 与 Grid 布局

学习Tailwind CSS中强大的Flex和Grid布局系统，掌握现代网页布局技术

Flexbox 布局

一维布局系统，用于设计行或列中元素的排列方式

Flexbox 布局

概述

Flexbox 是一种一维布局模型，特别适合处理行或列中的项目排列。与传统布局模型相比，Flexbox 提供了更灵活的空间分布和对齐能力。

主要概念

容器 (Container) - 应用 flex 的父元素
项目 (Items) - 容器内的直接子元素
主轴 (Main Axis) - 由 flex-direction 定义的方向
交叉轴 (Cross Axis) - 垂直于主轴的方向

基础示例

下面是一个基本的Flexbox容器示例，包含5个flex项目：

项目 1

项目 2

项目 3

项目 4

项目 5

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

Flex 方向 (Direction)

flex-direction 属性

flex-direction 属性决定了主轴的方向，也就是容器中子项目的排列方向。

flex-row (默认)

<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子元素从左到右排列（与文本方向一致）

flex-row-reverse

<div class="flex flex-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子元素从右到左排列（与flex-row相反）

flex-col

<div class="flex flex-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子元素从上到下垂直排列

flex-col-reverse

<div class="flex flex-col-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子元素从下到上垂直排列（与flex-col相反）

重要提示

flex-direction 的值会影响主轴的方向，从而影响 justify-content 和 align-items 的作用方向。

Flex 对齐

justify-content (主轴对齐)

justify-content 控制项目在主轴上的对齐方式。

justify-start (默认)

项目靠近主轴起点对齐

justify-end

项目靠近主轴终点对齐

justify-center

项目在主轴上居中对齐

justify-between

第一个项目靠起点，最后一个项目靠终点，其余项目平均分布

justify-around

每个项目两侧的空间相等（边缘项目与容器边缘的距离是项目之间距离的一半）

justify-evenly

所有项目之间的间距相等，包括与容器边缘的距离

align-items (交叉轴对齐)

align-items 控制项目在交叉轴上的对齐方式。

items-start

小

中

大

项目靠近交叉轴起点对齐

items-end

小

中

大

项目靠近交叉轴终点对齐

items-center

小

中

大

项目在交叉轴上居中对齐

items-baseline

小字

中字

大字

项目的第一行文字基线对齐

items-stretch (默认)

高度拉伸

项目拉伸以填满交叉轴（注意：项目不能有固定高度）

实用技巧

结合 justify-center 和 items-center 可以轻松实现元素的水平垂直居中。

Grid 布局

二维布局系统，同时控制行和列的排列，适合复杂布局

Grid 布局

概述

Grid 是一种二维布局系统，同时处理行和列，比Flexbox更适合复杂的布局。它可以让你创建规则的网格布局，也可以创建不规则的网格。

主要概念

网格容器 (Grid Container) - 应用 grid 的父元素
网格项目 (Grid Items) - 网格容器内的直接子元素
网格线 (Grid Lines) - 组成网格结构的水平和垂直线
网格轨道 (Grid Tracks) - 两条相邻网格线之间的空间，即行或列
网格单元格 (Grid Cell) - 四条网格线包围的区域
网格区域 (Grid Area) - 由多个网格单元格组成的矩形区域

基础示例

下面是一个基本的Grid容器示例，创建一个3列网格：

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

在Tailwind中，使用 grid 类启用网格布局，然后使用 grid-cols-{n} 来定义列数，使用 gap-{size} 定义间距。

与Flexbox比较

Flexbox适合一维布局（行或列），而Grid适合二维布局（同时控制行和列）。对于较复杂的布局，Grid通常是更好的选择。

Grid 布局属性

列模板 (grid-cols-*)

grid-cols-* 属性定义网格的列数和宽度。

列数对比

grid-cols-2 (两列等宽)

grid-cols-3 (三列等宽)

grid-cols-4 (四列等宽)

响应式列设置

在不同屏幕尺寸设置不同列数：sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4

随着屏幕宽度增加，列数会从1列增加到4列。调整浏览器窗口大小查看效果。

行模板 (grid-rows-*)

grid-rows-* 属性定义网格的行数和高度。

固定行数示例

grid-rows-3 (三行等高)

行1, 列1

行1, 列2

行2, 列1

行2, 列2

行3, 列1

行3, 列2

元素跨行跨列

使用 col-span-* 和 row-span-* 使网格项目跨越多个列或行。

跨列示例 (col-span-*)

col-span-2

1列

col-span-2

col-span-3 (跨所有列)

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">跨2列</div>
  <div>1列</div>
  <div>1列</div>
  <div class="col-span-2">跨2列</div>
  <div class="col-span-3">跨所有列</div>
</div>

跨行示例 (row-span-*)

row-span-3

1行

row-span-2

1行

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-span-3">跨3行</div>
  <div>1行</div>
  <div class="row-span-2">跨2行</div>
  <div class="row-span-2">跨2行</div>
  <div>1行</div>
  <div>1行</div>
</div>

复杂布局示例

同时使用col-span和row-span创建复杂布局

通过组合 col-span-* 和 row-span-* 可以创建各种复杂布局，非常适合构建仪表盘、图库等布局。

Grid 对齐属性

项目对齐 (justify-items & align-items)

justify-items 控制网格项目在其网格区域内沿水平轴的对齐方式。
align-items 控制网格项目在其网格区域内沿垂直轴的对齐方式。

justify-items (水平对齐)

justify-items-start

项目向每个网格区域的起始边对齐

justify-items-end

项目向每个网格区域的结束边对齐

justify-items-center

项目在每个网格区域内水平居中

align-items (垂直对齐)

items-start

项目向每个网格区域的顶部对齐

items-end

项目向每个网格区域的底部对齐

items-center

项目在每个网格区域内垂直居中

place-items (简写属性)

place-items 是 align-items 和 justify-items 的简写属性。

place-items-center 等价于设置 items-center justify-items-center

<div class="grid grid-cols-3 place-items-center gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

内容对齐 (justify-content & align-content)

justify-content 控制整个网格在容器内沿水平轴的对齐方式。
align-content 控制整个网格在容器内沿垂直轴的对齐方式。

justify-content (网格水平对齐)

justify-start

网格向容器左侧对齐

justify-center

网格在容器中水平居中

align-content (网格垂直对齐)

content-start

网格向容器顶部对齐

content-center

网格在容器中垂直居中

注意事项

justify-content/align-content 只有在网格总大小小于容器时才有效果
place-content 是 align-content 和 justify-content 的简写属性

实践案例

以下是一些Flexbox和Grid在实际项目中的常见应用场景，展示了如何利用这些布局技术构建现代化的UI界面。

1. 响应式导航栏（Flexbox）

Logo

Company Name

首页产品服务关于我们

关键实现:

使用flex-col在移动端垂直排列元素
通过md:flex-row在桌面端水平排列
使用justify-between实现logo和导航项的两端对齐
通过items-center垂直居中对齐元素