flex

Ejemplos

Ejemplo básico

Usa utilidades flex-<number> como flex-1 para permitir que un elemento flex crezca y se encoja según sea necesario, ignorando su tamaño inicial:

<div class="flex">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-1 ...">02</div>
  <div class="w-32 flex-1 ...">03</div>
</div>

Inicial

Usa flex-initial para permitir que un elemento flex se encoja pero no crezca, teniendo en cuenta su tamaño inicial:

<div class="flex">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-initial ...">02</div>
  <div class="w-32 flex-initial ...">03</div>
</div>

Auto

Usa flex-auto para permitir que un elemento flex crezca y se encoja, teniendo en cuenta su tamaño inicial:

<div class="flex ...">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-auto ...">02</div>
  <div class="w-32 flex-auto ...">03</div>
</div>

Ninguno

Usa flex-none para evitar que un elemento flex crezca o se encoja:

<div class="flex ...">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-32 flex-none ...">02</div>
  <div class="flex-1 ...">03</div>
</div>

Usando un valor personalizado

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

<div class="flex-[3_1_auto] ...">
  <!-- ... -->
</div>

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

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

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

Responsive design

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

<div class="flex-none md:flex-1 ...">
  <!-- ... -->
</div>

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