AZ Tools

Playground de CSS Flexbox

Desarrollo

Ajusta cada propiedad flex haciendo clic en vez de escribir. La vista previa se actualiza al instante para que el significado de cada valor sea obvio, y el cuadro de salida te da tanto la regla CSS cruda como las clases utility de Tailwind equivalentes. Ideal para aprender el modelo, depurar layouts o pegar la combinación correcta en un proyecto.

—
flex-direction
flex-wrap
justify-content
align-items
Vista previa
1
2
3
4
5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
Tailwind
flex gap-[8px]

Cómo usar

  1. Pulsa las chips de cada propiedad para fijar su valor.
  2. Ajusta el gap y el número de ítems para una vista previa más representativa.
  3. Copia la regla CSS o la clase Tailwind a tu proyecto.

Preguntas frecuentes

¿Diferencia entre justify-content y align-items?
justify-content alinea sobre el eje principal (la dirección que fluye el contenedor); align-items alinea sobre el eje cruzado. Cambia direction a column y verás cómo se intercambian.
¿Por qué align-items stretch llena el contenedor?
Stretch es el por defecto. Le dice a los ítems sin tamaño explícito en el eje cruzado que llenen el espacio. Otro valor encoge los ítems al contenido.
¿Cuándo importa flex-wrap?
Cuando los ítems no caben en una línea. Con wrap pasan a la siguiente línea; con nowrap (por defecto) se encogen para caber o desbordan.
¿Por qué la clase Tailwind usa valor arbitrario?
La mayoría de propiedades flex tienen clase dedicada (flex, justify-center, items-center, gap-2). Los gaps con valores custom (8px, 12px) usan valores arbitrarios como gap-[8px].

Herramientas relacionadas

Decodificador JWT

Decodifica un JSON Web Token para ver su cabecera, claims y expiración.

Desarrollo00

Generador de UUID

Genera UUID v4 aleatorios en lote, con copia.

Desarrollo00

Generador de Hash (SHA)

Genera hashes SHA-1, SHA-256, SHA-384 y SHA-512 a partir de texto.

Desarrollo00

Codificador / Decodificador de URL

Codifica texto para URLs en porcentaje, o decodifica URLs a texto.

Desarrollo00

Codificador / Decodificador Base64

Codifica texto a Base64 o decodifica Base64 a texto al instante.

Desarrollo00

Formateador y Validador de JSON

Formatea, embellece, minifica y valida JSON en tu navegador.

Desarrollo00