flex-basis

快速参考

示例

使用间距比例

使用 basis-<number> 实用工具（如 basis-64 和 basis-128）根据 间距比例 设置弹性项目的初始尺寸：

<div class="flex flex-row">
  <div class="basis-64">01</div>
  <div class="basis-64">02</div>
  <div class="basis-128">03</div>
</div>

使用容器比例

使用 basis-xs 和 basis-sm 等实用工具根据 容器比例 设置弹性项目的初始尺寸：

<div class="flex flex-row">
  <div class="basis-3xs">01</div>
  <div class="basis-2xs">02</div>
  <div class="basis-xs">03</div>
  <div class="basis-sm">04</div>
</div>

使用百分比

使用 basis-<fraction> 实用工具（如 basis-1/2 和 basis-2/3）设置弹性项目的初始尺寸：

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

使用自定义值

使用 basis-[<value>] 语法根据完全自定义的值设置 basis：

<div class="basis-[30vw] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 basis-(<custom-property>) 语法：

<div class="basis-(--my-basis) ...">
  <!-- ... -->
</div>

这只是 basis-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

使用断点变体（例如 md:）作为 flex-basis 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<div class="flex flex-row">
  <div class="basis-1/4 md:basis-1/3">01</div>
  <div class="basis-1/4 md:basis-1/3">02</div>
  <div class="basis-1/2 md:basis-1/3">03</div>
</div>

在 变体文档 中了解更多关于使用变体的信息。

自定义您的主题

使用 --container-* 主题变量来自定义项目中的固定宽度 basis 实用工具：

@theme {
  --container-4xs: 14rem;
}

现在可以在您的标记中使用 basis-4xs 实用工具：

<div class="basis-4xs">
  <!-- ... -->
</div>

basis-<number> 实用工具由 --spacing 主题变量驱动，您也可以自定义它：

@theme {
  --spacing: 1px;
}

在 主题文档 中了解更多关于自定义间距比例的信息。