Generador de Flexbox CSS

Compón un diseño CSS flex en tu navegador. Elige las propiedades del contenedor y de los items; observa la vista previa actualizarse en vivo; copia la regla terminada. 100% en el navegador, sin subir nada.

Contenedor

flex-direction flex-wrap justify-content align-items align-content gap

Items en la vista previa Selector

Preajustes

Items (se aplican a todos los items de la vista previa)

flex-grow flex-shrink flex-basis order align-self

Vista previa

CSS

Referencia rápida

flex-direction: Eje principal. row → izq.→der.; column → arriba→abajo; *-reverse invierte.
flex-wrap: Pasa a una nueva línea cuando los items desbordan.
justify-content: Distribución a lo largo del eje principal. space-between = barra de navegación.
align-items: Alineación en el eje transversal por item. Predeterminado stretch.
align-content: Distribución de filas en el eje transversal. No surte efecto sin wrap.
gap: Espacio entre items. Alternativa moderna a hacks de márgenes.
flex-grow / -shrink / -basis: Cómo los items reclaman el espacio sobrante, lo ceden y su tamaño inicial.
order: Orden visual; predeterminado 0; los negativos van antes.
align-self: Anulación por item de align-items; auto hereda.