Flex y position absolute compatibles ?

Mi experiencia de cierta incompatibilidad entre flex y la position absolute surgió al querer centrar verticalmente el contenido (título, headline y botón) del primer fold de un website. Les explico como superar esa “incompatibilidad”.

Lo que buscaba hacer es un diseño fluido, que permita guardar el contenido centrado, aún cuando la pantalla está disminuida en su altura.
Mira el ejemplo siguiente para entender mis palabras:

Así el texto sigue visible, en lugar de desaparecer por tener una posición especificada con referencia base aplicada desde el top o bottom del contenedor.

Las primeras líneas de css que escribí se aplicó de manera fantástica en Chrome; en Chrome únicamente. Después de leer unas documentaciones, entendí que efectivamente hay dos cosas que tomar en cuenta:

align-self no se aplica si está combinado con margin : auto

selector {
align-self: center; 
margin: auto;
}

la position absolute y las características flex son compatibles en todo los navegadores únicamente cuando flex y absolute:

  • se aplican a un mismo elemento
  • ese elemento es el contenedor padre directo de los elementos que vamos a alinear.
contenedor-padre-lejano {
 height: 100%;
}
contenedor-padre-directo {
 position: absolute;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 display: -ms-flexbox; /* TWEENER - IE 10 */ 
 display: -ms-flex; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+, Chrome, Opera */
 align-items: center;
 height: 100%;
 top: 0;
 flex-direction: column;
}
elemento-a-centrar {
}

Si atribuimos el display flex a un padre lejano, el efecto se aplicará unicamente en Chrome.

En cuanto a la compatibilidad con previas versiones de navegadores:

la compatibilidad de flex con varias versiones de navegadores

 

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *