Laboratorio Flexbox

Crea un diseño flex y copia el CSS exacto.

Previsualiza la dirección, envoltura, espaciado y alineación en un solo lugar. Cada control actualiza el ejemplo en vivo, explica la propiedad y genera código inicial limpio.

Controles del contenedor Cambia flex-direction, justify-content, align-items, align-content y gap.
Controles de ítems Ajusta flex-grow, flex-shrink, flex-basis y align-self para cualquier ítem.

Generador de Flexbox

Usa ajustes preestablecidos para patrones comunes o ajusta cada propiedad directamente. Las entradas están limitadas a rangos seguros para evitar CSS inválido.

Flujo del eje principal para los ítems.
Permite múltiples líneas cuando se acaba el espacio.
Distribuye ítems a lo largo del eje principal.
Alinea ítems a través del eje transversal.
Solo afecta a diseños envueltos en múltiples líneas.
Útil al probar alineación vertical.
0px 16px
1 4 ítems

Ítem seleccionado

Haz clic en cualquier ítem de la vista previa para editarlo individualmente.

0 1
0 1
Píxeles. Usa 0 para crecimiento según contenido.
Sobrescribe la alineación del contenedor para este ítem.

Vista previa en vivo

El contenedor de abajo se actualiza inmediatamente. Las etiquetas resumen qué eje actúa como dirección principal.

Eje principal: horizontal. Eje transversal: vertical.
display: flex; gap: 16px; Diseño de una sola línea.

Código listo para copiar

El CSS incluye solo las propiedades representadas. Las etiquetas HTML usan nombres de clase semánticos para facilitar su adaptación.


          


          

            
            

          

        

      


      

        

          

            
Cómo funciona

            
Flexbox organiza los hijos directos de un contenedor flex a través de un eje principal y un eje transversal.

          

        


        

          

            
1. La dirección define el eje principal

            
row hace que el eje principal sea horizontal. column lo hace vertical. Al cambiar esto, justify-content y align-items parecen intercambiar roles.

          

          

            
2. El envoltorio controla las líneas

            
Cuando flex-wrap es nowrap, align-content no tiene efecto visible. Solo importa cuando los ítems forman múltiples líneas.

          

          

            
3. Los valores del ítem afectan la negociación

            
flex-grow controla cómo se comparte el espacio sobrante, flex-shrink cómo se comprimen y flex-basis es el tamaño inicial.

          

        

        
Supuestos: los valores de base generados usan píxeles, los espacios usan píxeles enteros y la vista previa refleja el comportamiento de los navegadores modernos.

      


      

        

          

            
Referencia rápida de propiedades

            
Usa esto como consulta rápida después de probar un diseño en el generador.

          

        


        

          

            
justify-content

            
Mueve ítems a lo largo del eje principal. Ideal para barras de navegación y grupos de botones.

          

          

            
align-items

            
Controla la alineación del eje transversal para todos los ítems a la vez.

          

          

            
align-self

            
Sobrescribe la alineación del eje transversal para un solo ítem sin cambiar el resto.