¿Qué es CSS Flexbox?
CSS Flexbox (Flexible Box Layout) es un modelo de diseño unidimensional para distribuir espacio y alinear elementos en una fila o columna. El contenedor flex se define con display: flex y sus hijos directos se convierten en elementos flex. Propiedades clave del contenedor: flex-direction (fila o columna), flex-wrap (una línea vs. multilínea), justify-content (alineación del eje principal), align-items (alineación del eje transversal por línea) y align-content (alineación del eje transversal de múltiples líneas). Propiedades clave del elemento: flex-grow (cuánto crece un elemento), flex-shrink (cuánto se encoge), flex-basis (tamaño inicial) y align-self (sobreescribe align-items del contenedor para un elemento específico). Flexbox es ideal para barras de navegación, filas de tarjetas, diseños centrados y cualquier disposición unidimensional.
Cómo usar el Generador CSS Flexbox
-
Ajusta las propiedades del contenedor (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) usando los menús desplegables y el campo de entrada.
-
Haz clic en cualquier elemento de la vista previa para seleccionarlo (se vuelve naranja).
-
Configura flex-grow, flex-shrink, flex-basis y align-self del elemento seleccionado en el panel de elementos.
-
Haz clic en '+ Agregar elemento' para añadir más elementos; haz clic en 'Eliminar' para borrar el elemento seleccionado.
-
Cambia entre las pestañas CSS y HTML para ver el código generado, y luego haz clic en Copiar.
-
Haz clic en 'Restablecer todo' para comenzar de nuevo con el diseño predeterminado de 3 elementos.