flex-basis

Ejemplos

Usando la escala de espaciado

Usa utilidades basis-<number> como basis-64 y basis-128 para establecer el tamaño inicial de los elementos flex según la escala de espaciado:

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

Usando la escala de contenedor

Usa utilidades como basis-xs y basis-sm para establecer el tamaño inicial de los elementos flex según la escala de contenedor:

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

Usando porcentajes

Usa utilidades basis-<fraction> como basis-1/2 y basis-2/3 para establecer el tamaño inicial de los elementos flex:

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

Usando un valor personalizado

Usa la sintaxis basis-[<value>] para establecer el basis basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis basis-(<custom-property>) :

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

Esto es solo un atajo para basis-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad flex-basis con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --container-* para personalizar las utilidades fixed-width basis en tu proyecto:

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

Ahora la utilidad basis-4xs puede ser usada en tu marcado:

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

Las utilidades basis-<number> son impulsadas por la variable de tema --spacing, la cual también puedes personalizar:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación del tema.