Tailwind CSS 包裹与网格

Flexbox 和 Grid 是现代 CSS 布局的两个基石。Tailwind 为它们提供了全面且直观的工具类，让你可以轻松构建任何类型的响应式布局。

Flexbox

要使用 Flexbox，首先需要在一个容器元素上添加 flex 类。

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

控制主轴的方向。

• flex-row: (默认) 子元素水平排列。
• flex-row-reverse: 子元素水平反向排列。
• flex-col: 子元素垂直排列。
• flex-col-reverse: 子元素垂直反向排列。

Justify Content

控制子元素在主轴上的对齐方式。

• justify-start: (默认) 从主轴起点开始排列。
• justify-center: 在主轴上居中排列。
• justify-end: 从主轴终点开始排列。
• justify-between: 两端对齐，项目之间的间隔都相等。
• justify-around: 每个项目两侧的间隔相等。

Align Items

控制子元素在交叉轴上的对齐方式。

• items-start: 在交叉轴起点对齐。
• items-center: 在交叉轴上居中对齐。
• items-end: 在交叉轴终点对齐。
• items-baseline: 基线对齐。
• items-stretch: (默认) 拉伸以填满交叉轴。

Flex Grow & Shrink

控制子元素的放大和缩小比例。

• grow: 允许元素放大以填充可用空间 (flex-grow: 1)。
• grow-0: 不允许元素放大。
• shrink: 允许元素缩小 (flex-shrink: 1)。
• shrink-0: 不允许元素缩小。

Grid

要使用 Grid 布局，首先在容器上添加 grid 类。

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <!-- ... -->
  <div>9</div>
</div>

Grid Template Columns & Rows

定义网格的列数和行数。

• grid-cols-3: 创建一个三列网格。
• grid-rows-2: 创建一个两行网格。
• Tailwind 提供了从 1 到 12 的预设列/行数。

Gap

控制网格项之间的间距。

• gap-4: 在所有方向上设置间距。
• gap-x-8: 只设置水平（列）间距。
• gap-y-2: 只设置垂直（行）间距。

Spanning Columns & Rows

让某个网格项跨越多列或多行。

• col-span-2: 让一个项占据两列的宽度。
• row-span-3: 让一个项占据三行的高度。

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 ...">...</div>
  <div>...</div>
  <div>...</div>
  <div class="col-span-3 ...">...</div>
</div>

Starting and Ending Lines

精确控制网格项的起始和结束位置。

• col-start-2: 让一个项从第二条列网格线开始。
• col-end-5: 让一个项在第五条列网格线结束。

Flexbox 和 Grid 是非常强大的布局工具。Flexbox 更适合一维布局（单行或单列），而 Grid 则更适合二维布局（同时处理行和列）。通过组合使用它们，你可以构建出任何复杂的现代网页布局。