flex-basis

示例

使用间距比例

使用 basis-<number> 实用类（如 basis-64 和 basis-128）基于间距比例设置 flex 项目的初始尺寸

<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 的实用类基于容器比例设置 flex 项目的初始尺寸

<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）设置 flex 项目的初始尺寸

<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() 函数。

响应式设计

前缀一个 flex-basis 实用类 与断点变体（如 md:）结合使用，以仅在中等 屏幕尺寸及以上应用该实用类

<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 实用类可以在您的 markup 中使用

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

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

@theme {
  --spacing: 1px; 
}

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