Generador de Flexbox
Define las propiedades y lee, con palabras sencillas, lo que realmente hacen.
- Se ejecuta en tu navegador — tu texto no se envía a ningún sitio
- Sin registro, sin cuotas, gratis para usar tantas veces como quieras
Cómo funciona
Flexbox no es complicado, pero hay algo que confunde a casi todo el mundo: justify-content y align-items no significan horizontal y vertical. Significan a lo largo de la dirección y a través de ella, y la dirección es algo que tú defines.
La trampa, dicha sin rodeos
Con flex-direction: row, justify-content actúa en horizontal y align-items en vertical. Cambia a column y se intercambian por completo. Cada hora perdida con flexbox es, en esencia, esto. La explicación de abajo se actualiza al cambiar la dirección para que la relación se vea en lugar de memorizarse.
Eje principal y eje transversal
El eje principal es aquel a lo largo del cual fluyen los elementos, definido por flex-direction. El eje transversal es perpendicular a él. justify-content reparte el espacio a lo largo del eje principal; align-items coloca los elementos en el eje transversal. Cuando esos dos nombres se te quedan, el resto viene solo.
gap, y por qué sustituyó a los márgenes
gap pone espacio entre los elementos sin añadirlo fuera del primero y del último, que es justo lo que los márgenes hacen mal y lo que antes se arreglaba con trucos de :last-child. Es compatible con todos los navegadores actuales y ya no hay motivo para evitarlo.
nowrap significa encoger, no desbordar
El valor predeterminado es nowrap, y los elementos se encogen por debajo de su tamaño natural para caber en lugar de pasar a una nueva línea. Por eso el texto a veces se aplasta inesperadamente dentro de una fila flex. Con wrap los elementos pueden bajar a otra línea; min-width: 0 en un elemento hijo evita que se encoja más allá de su contenido.
Centrar en ambas direcciones
justify-content: center con align-items: center centra un elemento en ambas direcciones sea cual sea el flex-direction, y es la única combinación que vale la pena memorizar sin más.
Generador de Flexbox: preguntas
¿Por qué align-items mueve las cosas en horizontal?
Porque flex-direction es column. Las dos propiedades siguen la dirección, no la pantalla.
¿Cuál es la diferencia entre el eje principal y el eje transversal?
El eje principal es la dirección en la que fluyen los elementos, definida por flex-direction. El eje transversal es perpendicular a él.
¿Cómo centro algo en ambas direcciones?
justify-content: center junto con align-items: center.
¿Por qué mi texto se ve aplastado?
El valor predeterminado nowrap encoge los elementos para que quepan. Define flex-wrap: wrap, o min-width: 0 en el elemento hijo.
¿Puedo usar gap con flexbox?
Sí, en todos los navegadores actuales. Es mejor que los márgenes porque no añade espacio en los extremos.