max-block-size
En esta página
| Clase | Propiedades CSS |
|---|---|
max-block-<number> |
max-block-size: calc(var(--spacing) * <number>); |
max-block-<fraction> |
max-block-size: calc(<fraction> * 100%); |
max-block-none |
max-block-size: none; |
max-block-px |
max-block-size: 1px; |
max-block-full |
max-block-size: 100%; |
max-block-screen |
max-block-size: 100vh; |
max-block-dvh |
max-block-size: 100dvh; |
max-block-dvw |
max-block-size: 100dvw; |
max-block-lvh |
max-block-size: 100lvh; |
max-block-lvw |
max-block-size: 100lvw; |
max-block-svh |
max-block-size: 100svh; |
max-block-svw |
max-block-size: 100svw; |
max-block-min |
max-block-size: min-content; |
max-block-max |
max-block-size: max-content; |
max-block-fit |
max-block-size: fit-content; |
max-block-lh |
max-block-size: 1lh; |
max-block-(<custom-property>) |
max-block-size: var(<custom-property>); |
max-block-[<value>] |
max-block-size: <value>; |
Examples#
Basic example#
Use max-block-<number> utilities like max-block-24 and max-block-64 to set an element to a fixed maximum block size based on the spacing scale:
{
<div className="relative block-full max-block-80 w-full rounded-lg bg-blue-500">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-80</div>
</div>
</div>
<div className="relative grid block-full w-8 items-end rounded-lg">
<div className="relative block-full max-block-64 w-full rounded-lg bg-blue-500">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-64</div>
</div>
</div>
<div className="relative grid block-full w-8 items-end rounded-lg">
<div className="relative block-full max-block-48 w-full rounded-lg bg-blue-500">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-48</div>
</div>
</div>
<div className="relative grid block-full w-8 items-end rounded-lg">
<div className="relative block-full max-block-40 w-full rounded-lg bg-blue-500">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-40</div>
</div>
</div>
<div className="relative grid block-full w-8 items-end rounded-lg">
<div className="relative block-full max-block-32 w-full rounded-lg bg-blue-500">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-32</div>
</div>
</div>
</div>
}
<!-- [!code classes:max-block-80,max-block-64,max-block-48,max-block-40,max-block-32,max-block-24] -->
<div class="block-96 ...">
<div class="block-full max-block-80 ...">max-block-80</div>
<div class="block-full max-block-64 ...">max-block-64</div>
<div class="block-full max-block-48 ...">max-block-48</div>
<div class="block-full max-block-40 ...">max-block-40</div>
<div class="block-full max-block-32 ...">max-block-32</div>
</div>
Using a percentage#
Use max-block-full or max-block-<fraction> utilities like max-block-1/2 and max-block-2/5 to give an element a percentage-based maximum block size:
{
<div className="relative w-full rounded-lg bg-blue-500 block-full max-block-9/10">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-9/10</div>
</div>
</div>
<div className="relative grid w-8 items-end rounded-lg block-full">
<div className="relative w-full rounded-lg bg-blue-500 block-full max-block-3/4">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-3/4</div>
</div>
</div>
<div className="relative grid w-8 items-end rounded-lg block-full">
<div className="relative w-full rounded-lg bg-blue-500 block-full max-block-1/2">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-1/2</div>
</div>
</div>
<div className="relative grid w-8 items-end rounded-lg block-full">
<div className="relative w-full rounded-lg bg-blue-500 block-full max-block-full">
<div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-full</div>
</div>
</div>
</div>
}
<!-- [!code classes:max-block-9/10,max-block-3/4,max-block-1/2,max-block-1/4,max-block-full] -->
<div class="block-96 ...">
<div class="block-full max-block-9/10 ...">max-block-9/10</div>
<div class="block-full max-block-3/4 ...">max-block-3/4</div>
<div class="block-full max-block-1/2 ...">max-block-1/2</div>
<div class="block-full max-block-full ...">max-block-full</div>
</div>