Área de Juego de Flexbox
Área de juego de flexbox en línea y gratuita. Cambia flex-direction, justify-content, align-items y flex-wrap para ver cómo se reorganizan las cajas en tiempo real y copia el CSS.
Área de Juego de Flexbox
Área de juego de flexbox en línea y gratuita. Cambia flex-direction, justify-content, align-items y flex-wrap para ver cómo se reorganizan las cajas en tiempo real y copia el CSS.
Acerca de CSS flexbox
Qué hace flexbox
Flexbox coloca un conjunto de cajas en una dimensión y reparte el espacio libre entre ellas. Aplica display: flex a un contenedor y sus hijos directos se convierten en elementos flex que se alinean en fila (o columna) y pueden crecer, encogerse y alinearse juntos. Esta herramienta convierte cada propiedad en un botón para que veas cada efecto de inmediato.
Eje principal frente a eje transversal
flex-direction decide el eje principal: row va de izquierda a derecha, column de arriba abajo. justify-content alinea los elementos a lo largo de ese eje principal, mientras que align-items los alinea a lo largo del eje transversal perpendicular. Cuando sabes sobre qué eje actúa cada propiedad, justify-content y align-items dejan de confundirte.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Cuál es la diferencia entre justify-content y align-items?
justify-content alinea los elementos a lo largo del eje principal (la dirección definida por flex-direction); align-items los alinea a lo largo del eje transversal (perpendicular). Cambia aquí flex-direction entre row y column y observa cuál mueve las cajas.
¿Qué significa flex: 0 1 auto?
flex es la forma abreviada de flex-grow, flex-shrink y flex-basis, en ese orden. 0 1 auto significa que el elemento no crecerá, podrá encogerse si falta espacio y parte de su tamaño de contenido. Selecciona una caja y edita los tres valores para ver la abreviatura en el CSS generado.
¿Mis datos se envían a algún servidor?
No. Todo se ejecuta por completo en tu navegador y nada de lo que introduces sale de tu dispositivo.