Tailwind CSS - 显示

Tailwind CSS - Display 属性

display 属性是 CSS 中最基础的属性之一，它控制着元素如何生成盒子以及如何参与页面的布局流。Tailwind CSS 提供了一套全面的工具类来高效管理此属性。

核心 Display 工具类

以下是最常用的 display 工具类及其现代用例：

类	CSS 属性	主要用例
block	display: block;	用于应占据所有可用宽度并从新行开始的元素。
inline	display: inline;	用于应与周围文本一起流动的元素。宽度和高度属性对其无效。
inline-block	display: inline-block;	一种混合模式：像文本一样流动，但尊重宽度、高度和垂直外边距。
flex	display: flex;	一维布局的现代标准。 创建一个灵活的容器，用于在行或列中对齐项目。
grid	display: grid;	二维布局的现代标准。 创建一个网格容器，用于复杂的二维布局。
hidden	display: none;	从页面中完全移除一个元素。广泛用于响应式设计和条件性 UI。
contents	display: contents;	使容器元素“消失”，允许其子元素在布局中成为容器父元素的直接子元素。

关于表格工具类的注意事项： table、table-row 和 table-cell 等类用于样式化语义化的 HTML <table> 元素。它们 不应 用于构建主页面布局。为此，始终优先选择 Flexbox (flex) 或 Grid (grid)。

现代开发中的实际示例

让我们超越基本示例，看看这些工具类如何构建真实的组件。

示例 1：使用 Flexbox 构建响应式卡片

在这里，flex 用于创建一张卡片。在小屏幕 (sm:) 上，它垂直堆叠；在中等屏幕及以上 (md:)，它并排排列。hidden 和 md:block 类根据屏幕尺寸控制“了解更多”按钮的可见性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Card</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 flex justify-center">

  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1515263487990-61b07816b324?q=80&w=2070" alt="现代建筑">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">案例研究</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">为您的业务找到合适的建筑</a>
        <p class="mt-2 text-slate-500">难以找到可扩展的空间？我们分解了选择下一个商业物业的关键考量因素。</p>
        <button class="mt-4 px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 hidden md:block">了解更多</button>
      </div>
    </div>
  </div>

</body>
</html>

示例 2：使用 Grid 创建页面布局

CSS Grid 非常适合顶层页面结构。此示例使用 grid 和 grid-cols-* 创建了一个常见的侧边栏和主内容布局。该布局是响应式的，在小屏幕上堆叠显示，在较大屏幕 (lg:) 上则变为两列布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Page Layout</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

  <div class="container mx-auto p-4">
    <div class="grid lg:grid-cols-4 gap-6">

      <!-- 侧边栏 -->
      <aside class="lg:col-span-1 bg-white p-6 rounded-lg shadow">
        <h2 class="font-bold text-xl mb-4">导航</h2>
        <ul class="space-y-2">
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">仪表盘</a></li>
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">团队</a></li>
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">项目</a></li>
        </ul>
      </aside>

      <!-- 主内容 -->
      <main class="lg:col-span-3 bg-white p-6 rounded-lg shadow">
        <h1 class="font-bold text-2xl mb-4">仪表盘</h1>
        <p>欢迎来到您的主内容区。在大屏幕上，此区域占据 4 个网格列中的 3 个，而侧边栏占据 1 个。在小屏幕上，它们自然堆叠。</p>
      </main>

    </div>
  </div>

</body>
</html>