Editor de Flexbox

¿Qué es un editor visual de Flexbox?#

Flexbox es el motor de disposición de CSS para colocar elementos a lo largo de una única dirección (una fila o una columna) y distribuir el espacio libre entre ellos. Responde preguntas que antes requerían floats, márgenes negativos y prueba y error: «¿cómo centro esto verticalmente?», «¿cómo hago que estas tres columnas tengan la misma altura?», «¿cómo empujo un elemento hacia la derecha mientras los demás se quedan a la izquierda?». Una vez que lo entiendes, lo usas en casi todas las páginas; hasta entonces, los nombres de las propiedades (justify-content, align-items, flex-grow) confunden incluso a desarrolladores experimentados, porque la especificación sobrecarga palabras corrientes del inglés con un significado de disposición muy preciso.

Esta página es un patio de juego de Flexbox en vivo. Afinas las propiedades del contenedor y las sobreescrituras por elemento en la barra lateral izquierda; el panel derecho muestra el resultado al instante y escribe el CSS exacto y listo para pegar que lo produjo. La idea es dejar de adivinar qué valor hace qué y, en cambio, ver el efecto en el momento en que lo cambias, para luego copiar la regla que funcionó.

Cómo se usa#

La disposición se divide en una barra lateral de controles y un panel de vista previa + salida CSS.

1. Configura el contenedor. Usa los desplegables de la barra lateral:
   • Dirección — row, row-reverse, column, column-reverse.
   • Justify content — distribuye el espacio libre a lo largo del eje principal: flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align items — dispone los hijos a lo largo del eje transversal: stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap mantiene todo en una línea; wrap y wrap-reverse permiten que los hijos fluyan a nuevas líneas.
   • Align content — aparece solo cuando el wrap está activo; distribuye las líneas de hijos envueltos.
   • Separación — un control de 0 a 64 px; el valor en vivo se lee junto a la etiqueta.
2. Gestiona los elementos. Bajo la cabecera Elementos, Añadir elemento inserta otro hijo flex. Cada fila de elemento expone Grow, Shrink, Basis, Orden y Align self (una sobreescritura por hijo del align-items del contenedor). Elimina un hijo con su botón Eliminar elemento.
3. Observa la vista previa. La caja grande de la derecha es un contenedor flex real: cada cambio se redibuja de inmediato.
4. Copia el CSS. El bloque de reglas generado se sitúa bajo la vista previa. Haz clic en Copiar para llevártelo. Cuando todos los elementos comparten los mismos valores, se emite un único bloque .item; en el momento en que cualquiera difiera, la salida cambia a un bloque .item:nth-child(N) por hijo para que cada sobreescritura quede sin ambigüedad.

Características clave#

• Propiedades del contenedor y por hijo en un solo sitio. Nada de Flexbox queda oculto: flex-direction, ambos ejes de alineación, el wrap, gap y, por elemento, grow/shrink/basis/order/align-self están todos en vivo.
• Salida CSS correcta y mínima. align-content solo se emite cuando el wrap está realmente activo (no hace nada en una sola línea); los elementos iguales colapsan a un bloque; order y align-self aparecen solo cuando no son el valor predeterminado. La salida es la regla más corta que reproduce lo que ves.
• El shorthand flex, hecho bien. Cada hijo se serializa como flex: <grow> <shrink> <basis>: la forma canónica de tres valores que evita los valores por defecto sorprendentes de los valores que faltan en el shorthand.
• Basis validado. Escribe auto, 0, 200px, 50 % o 10rem y se acepta; una base no válida se marca y vuelve a auto en vez de producir silenciosamente un CSS roto.
• Vista previa forzada a izquierda-a-derecha. El row de Flexbox se define con semántica de izquierda a derecha, así que la vista previa se ancla LTR independientemente del idioma de la página: lo que ves coincide con lo que hará tu hoja de estilos.

Ejemplo práctico#

Una disposición común: una cabecera con un logo anclado a la izquierda, un título que ocupa el espacio restante y una acción anclada a la derecha, distribuidos uniformemente con una separación fija.

• Dirección: row
• Justify content: space-between
• Align items: center
• Wrap: nowrap
• Separación: 16px
• Elementos: tres hijos, el del medio con Grow 1 para que absorba el espacio libre, los demás en el flex: 0 1 auto por defecto.

El CSS generado:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Como el segundo hijo crece y los demás no, la salida usa correctamente tres bloques nth-child separados. Suelta esto en cualquier proyecto y el logo queda pegado al borde izquierdo, la acción pegada a la derecha y el título rellena el medio: sin floats, sin márgenes.

Preguntas frecuentes#

justify-content frente a align-items: ¿cuál es cuál?#

justify-content siempre trabaja a lo largo del eje principal (la dirección que fija flex-direction: horizontal en un row, vertical en un column). align-items siempre trabaja a lo largo del eje transversal (perpendicular al eje principal). Así, en un row, justify-content controla el espaciado izquierda/derecha y align-items controla la alineación arriba/abajo. Cambia la dirección a column y se intercambian los roles. Recordar «justify = principal, align = transversal» te ahorra la confusión de Flexbox más común.

¿Cuándo hace algo flex-grow?#

Solo cuando hay espacio libre que absorber. Si tres hijos tienen cada uno flex-grow: 1 y el contenedor es más ancho de lo que los hijos necesitan, el espacio sobrante se divide en tercios y se añade por igual. Si el contenedor está exactamente lleno, nada crece. Pon flex-grow: 0 (el valor por defecto) y un hijo se niega a expandirse, dejando que sus hermanos tomen el espacio. flex-shrink es el espejo: decide quién cede espacio primero cuando no hay sitio suficiente.

¿Por qué no aparece mi separación?#

Tres causas habituales: los hijos tienen un ancho fijo que llena el contenedor por completo (sin sitio para separaciones), flex-wrap: nowrap fuerza a los hijos a desbordar en vez de envolver a la disposición consciente del gap, o un margen en los hijos está enmascarando visualmente la separación. El control aquí llega a 64 px; si necesitas más, la propiedad subyacente acepta cualquier longitud, así que copia el CSS y sube gap en tu propio archivo.

La salida usa nth-child: ¿puedo usar una clase en su lugar?#

Por supuesto. Los selectores .item:nth-child(N) se emiten porque se mapean sin ambigüedad a la vista previa cuando los elementos difieren. En código real, cámbialos por tus propias clases (.logo, .title, .action): las declaraciones de dentro siguen siendo idénticas. Cuando todos los hijos coinciden, la herramienta ya emite un único bloque .item compartido que puedes renombrar en un solo sitio.