Tailwind CSS - Flexbox 与 Grid

Tailwind CSS 现代指南：Flexbox 与 Grid

Flexbox 和 Grid 是现代 CSS 中两个最强大的布局模块，Tailwind 提供了一整套全面的工具类来发挥它们的力量。了解何时使用哪个是高效构建复杂响应式界面的关键。

何时使用 Flexbox 与 Grid

• Flexbox (flex)：用于一维布局——要么是行，要么是列。它擅长沿单一轴线分配空间。例如导航栏、按钮组或卡片内项目的对齐。
• CSS Grid (grid)：用于二维布局——同时包含行和列。它非常适合页面级布局、复杂的仪表板和需要同时控制两个方向对齐的图片画廊。

核心 Flexbox 和 Grid 工具类

此表格提供了最常用的 Flexbox 和 Grid 工具类的快速参考。如需深入了解，请访问官方 Tailwind CSS 文档。

主题	描述	官方文档
Flex Direction	控制 flex 项目的方向（flex-row, flex-col）。	查看文档
Justify Content	控制项目沿主轴的间距。	查看文档
Align Items	控制项目沿交叉轴的间距。	查看文档
Flex Wrap	控制 flex 项目是否换行（flex-wrap, flex-nowrap）。	查看文档
Gap	控制 flex 和 grid 项目之间的间距（gap-4, gap-x-2）。	查看文档
Grid Template Columns	定义网格的列（grid-cols-3, grid-cols-12）。	查看文档
Grid Column Start / End	使网格项目跨越多列（col-span-2, col-start-3）。	查看文档
Grid Template Rows	定义网格的行（grid-rows-3）。	查看文档

示例 1：使用 Flexbox 的响应式导航栏

Flexbox 非常适合导航栏。在小屏幕上，我们可以使用 flex-col，而在大屏幕上，使用 md:flex-row 搭配 justify-between 来分隔标志和链接。

<nav class="bg-slate-800 text-white p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- 标志 -->
    <a href="#" class="font-bold text-xl">MyApp</a>

    <!-- 链接 -->
    <div class="flex flex-col md:flex-row md:space-x-6 space-y-2 md:space-y-0 mt-4 md:mt-0">
      <a href="#" class="hover:text-sky-400">Home</a>
      <a href="#" class="hover:text-sky-400">About</a>
      <a href="#" class="hover:text-sky-400">Services</a>
      <a href="#" class="hover:text-sky-400">Contact</a>
    </div>
  </div>
</nav>

示例 2：使用 Grid 的产品卡片布局

CSS Grid 使创建响应式产品卡片画廊变得轻而易举。我们为不同的屏幕尺寸定义了列数。

<div class="bg-slate-100 p-8">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-slate-800 mb-6">特色产品</h2>
    <!-- 响应式网格布局 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- 产品卡片 1 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="h-48 bg-slate-200"></div> <!-- 图片占位符 -->
        <div class="p-4">
          <h3 class="font-semibold text-lg">现代椅子</h3>
          <p class="text-slate-600">$150.00</p>
        </div>
      </div>
      <!-- 产品卡片 2 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="h-48 bg-slate-200"></div>
        <div class="p-4">
          <h3 class="font-semibold text-lg">木制书桌</h3>
          <p class="text-slate-600">$320.00</p>
        </div>
      </div>
      <!-- ... 更多卡片 ... -->
    </div>
  </div>
</div>

现代布局的最佳实践

• 移动优先：首先为小屏幕设计布局，然后使用 sm:、md: 和 lg: 等响应式前缀为大屏幕增加复杂性。
• 语义化 HTML：使用 <nav>、<main>、<aside> 和 <article> 等语义标签。这能提高可访问性和 SEO，并使你的布局代码更易于理解。
• 组合使用：不要害怕在 grid 项目中嵌套 flex 容器，反之亦然。它们可以协同工作，发挥强大作用。例如，使用 grid 进行整体页面布局，而使用 flexbox 对标题内的项目进行对齐。