6XC

Zona de Pruebas de CSS Flexbox

Ajusta flex-direction, justify-content, align-items, wrap y gap en cajas en vivo, y luego copia el CSS del contenedor.

853 visitas

1
2
3
4
5

Flexbox en pocas palabras

Al definir display: flex, un contenedor se convierte en un motor de diseño unidimensional. justify-content distribuye los elementos a lo largo del eje principal, align-items los alinea en el eje transversal, flex-direction elige el eje, y gap añade espacio entre elementos sin usar márgenes. Juega con los controles y observa cómo las cajas numeradas se reorganizan en vivo.

Preguntas Frecuentes

¿Cómo centro algo perfectamente?

Las famosas tres líneas: display: flex; justify-content: center; align-items: center; — centrado horizontal y vertical de una vez.

¿Flexbox o Grid?

Flexbox destaca en filas o columnas unidimensionales que se ajustan al contenido (barras de herramientas, navegación, filas de tarjetas). Grid está pensado para diseños bidimensionales con pistas explícitas. Se combinan muy bien.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar