Generador de flexbox CSS
Ajusta las propiedades flex y ve el layout en vivo, luego copia el CSS.
Generador de flexbox CSS
Crea un layout flexbox CSS de forma visual y copia el código. Ajusta flex-direction, justify-content, align-items y gap, y mira cómo se reordenan en vivo tres cajas de ejemplo en la vista previa.
Flexbox en breve
Pon display: flex en un contenedor. flex-direction fija el eje principal (fila o columna); justify-content alinea los elementos a lo largo de él; align-items los alinea en el eje cruzado; gap añade espacio entre elementos. Es la herramienta de referencia para layouts unidimensionales como barras de navegación y filas de tarjetas.
Preguntas frecuentes
¿Diferencia entre justify-content y align-items? justify-content actúa en el eje principal; align-items en el eje cruzado.
¿Flexbox o grid? Flexbox para layouts de una dimensión (una fila o columna); grid para dos dimensiones.