Tailwind CSS - 弹性基准

现代 Tailwind CSS：精通 Flex Basis

在 Tailwind CSS 中，flex-basis 工具类控制 flex 项目在容器中分配任何剩余空间之前的初始或“理想”大小。它是使用 Flexbox 创建复杂且响应式布局的基础属性。可以将其视为一个建议的尺寸；项目可能会根据 flex-grow 和 flex-shrink 等其他 flex 属性，从此基准尺寸增长或收缩。

核心概念：Flexbox 尺寸计算算法

为了有效地使用 flex-basis，了解它在 Flexbox 布局算法中的作用会很有帮助：

1. 确定 Flex Basis：浏览器首先查看每个项目的 flex-basis。如果它是 auto，则项目的基准是其内容大小。如果它是一个特定值（如 basis-1/4 或 basis-32），则使用该值。
2. 分配自由空间：然后浏览器比较所有项目的总基准与容器中的可用空间。
   • 如果有额外空间，则根据项目的 flex-grow 因子进行分配。
   • 如果空间不足，则根据项目的 flex-shrink 因子进行收缩。

Tailwind 的 basis-* 工具类让你可以精确控制第 1 步。

Flex Basis 工具类

Tailwind 提供了一套基于其默认间距和尺寸比例的全面 basis-* 工具类。这包括固定值（rem, px）、百分比和关键词。

类名	CSS 属性
basis-0	flex-basis: 0px;
basis-1	flex-basis: 0.25rem; /* 4px */
basis-2	flex-basis: 0.5rem; /* 8px */
basis-4	flex-basis: 1rem; /* 16px */
basis-auto	flex-basis: auto;
basis-px	flex-basis: 1px;
basis-1/2	flex-basis: 50%;
basis-1/3	flex-basis: 33.333333%;
basis-2/3	flex-basis: 66.666667%;
basis-1/4	flex-basis: 25%;
basis-2/4	flex-basis: 50%;
basis-3/4	flex-basis: 75%;
basis-full	flex-basis: 100%;

注意：上表显示的是代表性示例。Tailwind 包含更多与其间距比例对齐的数字步长（basis-3、basis-5 等）和分数（basis-1/5、basis-2/5 等）。你可以在官方 Tailwind CSS 文档中找到完整列表。

现代开发设置

虽然你可以使用 Tailwind Play CDN 进行快速演示，但实际项目会从构建过程设置中受益。这能实现定制、优化和发挥 Tailwind 的全部功能。

# 1. 安装 Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# 2. 在 tailwind.config.js 中配置你的模板路径
// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. 将 Tailwind 指令添加到你的主 CSS 文件中
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. 启动构建过程
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

实际示例

示例 1：固定侧边栏布局

在这里，我们创建一个常见的布局，包含一个固定宽度的侧边栏和一个填充剩余空间的主内容区域。我们使用 basis-64 设置侧边栏的初始宽度，并对主内容区域使用 flex-1（flex-grow: 1 的简写）使其扩展。

<!-- 链接到你编译后的 CSS 文件 -->
<link href="/dist/output.css" rel="stylesheet">

<body class="bg-slate-100 text-slate-800 p-8">
  <h3 class="text-2xl font-bold mb-4">产品页面布局</h3>
  <div class="flex flex-row gap-8 bg-white p-4 rounded-lg shadow-md">
    <!-- 侧边栏：具有固定的 basis，不会增长或收缩 -->
    <aside class="basis-64 flex-shrink-0 bg-slate-200 p-4 rounded">
      <h4 class="font-semibold">筛选器</h4>
      <p class="text-sm mt-2">类别筛选器放置在此处。</p>
    </aside>

    <!-- 主内容：增长以填充可用空间 -->
    <main class="flex-1 bg-slate-50 p-4 rounded">
      <h4 class="font-semibold">产品</h4>
      <p class="text-sm mt-2">产品网格放置在此处。</p>
    </main>
  </div>
</body>

示例 2：响应式列布局

Tailwind 的一个主要优势是响应式设计。在此示例中，我们创建了一个三列布局。在小屏幕（< md）上，每个项目占据整个宽度。在中等屏幕及以上（md:），它们形成一个三列布局，其中中间的项目宽度是其他项目的两倍。

<link href="/dist/output.css" rel="stylesheet">

<body class="bg-gray-100 p-8">
  <h3 class="text-2xl font-bold mb-4">响应式分级定价</h3>
  <div class="flex flex-wrap md:flex-nowrap gap-4">
    <!-- 在移动端，basis-full 使其成为一个全宽块。 -->
    <!-- 在桌面端，basis-1/4 设置其宽度。 -->
    <div class="basis-full md:basis-1/4 bg-white p-6 rounded-lg shadow text-center">
      <h4 class="font-bold text-lg">基础版</h4>
      <p class="mt-2">$10/月</p>
    </div>

    <!-- 特色计划在桌面端更宽 -->
    <div class="basis-full md:basis-1/2 bg-indigo-500 text-white p-6 rounded-lg shadow-xl text-center">
      <h4 class="font-bold text-lg">专业版</h4>
      <p class="mt-2">$25/月</p>
    </div>

    <div class="basis-full md:basis-1/4 bg-white p-6 rounded-lg shadow text-center">
      <h4 class="font-bold text-lg">企业版</h4>
      <p class="mt-2">联系我们</p>
    </div>
  </div>
</body>

最佳实践与常见错误

• 使用 gap 进行间距：与其在 flex 子元素上添加外边距（mr-4），不如在父 flex 容器上应用 gap-4 工具类。这种方法更简洁，并且在换行布局中能更一致地处理间距。
• 父元素必须是 flex：除非父元素具有 display: flex（或 inline-flex），否则 basis-* 工具类不会起作用。
• basis 与 width：当你想让项目的尺寸成为弹性布局计算的一部分时，使用 basis-*。当你想要设置一个不应受 flex-grow 或 flex-shrink 影响的固定宽度时（除非 flex-basis 为 auto），使用 w-*。
• 与 grow 和 shrink 结合使用：flex-basis 与 flex-grow（grow 或 flex-1）和 flex-shrink（shrink 或 shrink-0）结合使用时，能最强大地控制项目如何适应可用空间。