Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse. En esta guía, veremos qué tan bien se admite flexbox en los navegadores y veremos algunos problemas, recursos y métodos potenciales para crear soluciones alternativas y alternativas.

La historia de flexbox

Como ocurre con todas las especificaciones CSS, la especificación Flexbox pasó por una gran cantidad de cambios antes de convertirse en la recomendación candidata que tenemos hoy. Como recomendación candidata, no deberíamos ver grandes cambios en este punto en la especificación, sin embargo, este no ha sido el caso con las iteraciones pasadas de flexbox.

Flexbox se implementó de forma experimental en varios navegadores web. En ese momento, el método para crear implementaciones experimentales era utilizar un proveedor prefix. La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones. La idea era no utilizar las implementaciones experimentales en el código de producción. Sin embargo, en última instancia, los prefijos se utilizaron en el código de producción y los cambios en la especificación experimental hicieron que las personas tuvieran que actualizar sus sitios para mantenerse al día.

En 2009, la especificación se veía bastante diferente. Para crear un contenedor flexible, usaría display: box y hubo una serie de box-* properties, que hizo cosas que reconocerá hoy en flexbox.

Había un actualizar a la especificación que actualizó la sintaxis a display: flexbox – esto fue nuevamente prefijado por el proveedor.

Finalmente, la especificación se actualizó para definir display: flex como la forma de crear un contenedor flexible. La compatibilidad del navegador con la versión actualizada de la especificación es excelente a partir de este momento.

Existen algunos artículos antiguos que se refieren a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible. Si encuentra algo que se refiera a display: box o display: flexbox esta es información desactualizada.

Estado en los navegadores

La compatibilidad del navegador con flexbox es excelente y la mayoría de los navegadores no necesitan un prefix en este punto. Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:

  • Internet Explorer 10, que implementó el display: flexbox versión de la especificación con el -ms- prefix.
  • UC Browser, que todavía es compatible con el 2009 display: box versión solo con el -webkit- prefix.

Tenga en cuenta también que Internet Explorer 11 es compatible con el moderno display: flex especificación, sin embargo, tiene una serie de errores en la implementación.

Problemas comunes

La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentábamos utilizar una especificación experimental en producción. Si está intentando garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el Flexbugs El sitio es un recurso útil. Verá que muchos de los errores enumerados se aplican a versiones anteriores del navegador y se corrigen en los navegadores actuales. Cada uno de los errores tiene una solución alternativa en la lista, que puede ahorrarle muchas horas de desconcierto.

Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos del proveedor en su CSS además de la versión sin prefijo. Esto se está volviendo cada vez menos un requisito hoy en día, ya que el soporte es generalizado. 

.wrapperdisplay: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;

Autoprefixer en línea es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador. También puedes consultar Puedo usar para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar una decisión.

Técnicas de respaldo útiles

Dado que el uso de flexbox se inicia con el valor de la display propiedad, cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear alternativas al sobrescribir un método de diseño con otro. La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.

Elementos flotantes

“Flotar y despejar no crea flotación o espacio libre del artículo flexible, y no lo saca de flujo”. – 3. Contenedores flexibles

En el siguiente ejemplo en vivo, floté dos bloques y luego configuré display: flex en el contenedor. Los elementos ahora son elementos flexibles, lo que significa que se estiran a la misma altura. No se aplica ningún comportamiento de flotación.

Puede probar el comportamiento de reserva eliminando display: flex de la envoltura.

pantalla: bloque en línea

Una vez inline-block elemento se convierte en un elemento flexible, es blockified y por lo que el comportamiento de display: inline-block como preservar el espacio en blanco entre elementos ya no se aplica.

Eliminar display: flex para ver el comportamiento de reserva. Verá un espacio en blanco agregado entre los elementos, que es lo que sucede al usar display: inline-block ya que prefiere los espacios en blanco como otros elementos en línea.

pantalla: mesa-

Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.

Si utiliza display: table-cell en un elemento de su HTML, adopta el estilo de una celda de tabla HTML. CSS crea cuadros anónimos para representar estos elementos, de modo que no es necesario envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni aplicar estilo a estos cuadros anónimos; están ahí únicamente para arreglar el árbol.

Si luego declaras display: flex en el elemento principal, estos cuadros anónimos no se crean, por lo que su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la mesa.

“Nota: Algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si una caja de este tipo es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con display: table-cell se convertirán en dos elementos de display: block flexibles separados, en lugar de estar agrupados en una sola tabla anónima “. – 4. Elementos flexibles

La propiedad de alineación vertical

El ejemplo en vivo a continuación demuestra el uso de vertical-align propiedad junto con display: inline-block. Ambos display: table-cell y display: inline-block Permitir el uso de esta propiedad. Uso de vertical-align permite la alineación vertical antes de flexbox. Flexbox ignora la propiedad y, por lo tanto, puede usarla junto con display: table-cell o display: inline-block como alternativa y luego use de forma segura las propiedades de alineación de caja en flexbox en su lugar.

Consultas de funciones y flexbox

Puede utilizar consultas de funciones para detectar la compatibilidad con flexbox:

@supports(display: flex)
  // code for supporting browsers

Tenga en cuenta que Internet Explorer 11 aún no admite consultas de funciones lo hace soporte flexbox. Si decide que la implementación de IE11 tiene demasiados errores y desea servirle el diseño de reserva, entonces puede usar consultas de características para entregar reglas de flexbox solo a aquellos navegadores con buen soporte de flexbox. Recuerde que si desea incluir versiones de navegadores que tenían flexbox con prefijo de proveedor, deberá incluir la versión con prefijo en su consulta de funciones. La siguiente consulta de funciones incluiría UC Browser, que admite consultas de funciones y la antigua sintaxis de flexbox, con el prefijo:

@supports(display: flex)or(display: -webkit-box)
  // code for supporting browsers

Para obtener más información sobre el uso de consultas de funciones, consulte Usar consultas de características en CSS en el blog de Mozilla Hacks.

Conclusión

Si bien he pasado algún tiempo en esta guía analizando posibles problemas y fallas, flexbox está muy listo para que lo uses en el trabajo de producción. Esta guía lo ayudará en aquellos casos en los que se encuentre con un problema o tenga el requisito de admitir navegadores más antiguos.