flex-basis

示例(Examples)

¥Examples

使用间距比例(Using the spacing scale)

¥Using the spacing scale

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

¥Use basis-<number> utilities like basis-64 and basis-128 to set the initial size of flex items based on the spacing scale:

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

使用容器比例(Using the container scale)

¥Using the container scale

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

¥Use utilities like basis-xs and basis-sm to set the initial size of flex items based on the container scale:

<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>

使用百分比(Using percentages)

¥Using percentages

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

¥Use basis-<fraction> utilities like basis-1/2 and basis-2/3 to set the initial size of flex items:

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

使用自定义值(Using a custom value)

¥Using a custom value

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

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

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

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

这只是简写，用于 basis-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

在 flex-basis 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<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>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --container-* 主题变量来自定义项目中的 fixed-width basis 工具：

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

现在 basis-4xs 工具可用于你的标记：

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

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

@theme {
  --spacing: 1px; 
}

在此详细了解如何自定义间距比例： 主题文档。