block-size

示例

基本示例

使用像 block-24 和 block-64 这样的 block-<number> 工具类，基于间距刻度为元素设置固定的块大小：

<div class="block-96 ...">block-96</div><div class="block-80 ...">block-80</div><div class="block-64 ...">block-64</div><div class="block-48 ...">block-48</div><div class="block-40 ...">block-40</div><div class="block-32 ...">block-32</div><div class="block-24 ...">block-24</div>

使用百分比

使用 block-full 或 block-<fraction> 工具类，如 block-1/2 和 block-2/5，为元素设置基于百分比的块大小：

<div class="block-full ...">block-full</div><div class="block-9/10 ...">block-9/10</div><div class="block-3/4 ...">block-3/4</div><div class="block-1/2 ...">block-1/2</div><div class="block-1/3 ...">block-1/3</div>

匹配视口大小

使用 block-screen 工具类，使元素块大小等于视口的整个块尺寸：

<div class="block-screen">  <!-- ... --></div>

匹配动态视口

使用 block-dvh 工具类，使元素块大小等于随着浏览器 UI 展开或收缩而变化的视口块尺寸：

<div class="block-dvh">  <!-- ... --></div>

匹配最大视口

使用 block-lvh 工具类，将元素的块大小设置为视口可能的最大块尺寸：

<div class="block-lvh">  <!-- ... --></div>

匹配最小视口

使用 block-svh 工具类，将元素的块大小设置为视口可能的最小块尺寸：

<div class="block-svh">  <!-- ... --></div>

使用自定义值

Use the block-[<value>] syntax to set the 块大小 based on a completely custom value:

<div class="block-[32rem] ...">  <!-- ... --></div>

For CSS variables, you can also use the block-(<custom-property>) syntax:

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

This is just a shorthand for block-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a block-size utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="block-1/2 md:block-full ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

自定义主题

The block-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {  --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.