[SOLUCIONADO] Problema con flexbox y navegadores

sergi_multimedia · #1 (**permalink**) 27/08/2013, 06:04

Hola, estoy haciendo mi primera prueba con el uso de Flexbox. Básicamente lo que quiero hacer es 4 bloques, uno encima del otro, con un 25% de altura cadauno, o sea, que me llena la pantalla.

* En Safari (OSX & iOS) me funciona, también en Chrome.
* En Firefox me sale 4 bloques pero repartidos horizontalmente en 4 bloques, lo mismo me pasa con Opera.
* En Andrioid, Windows Phone, e Internet Explorer no lo he probado.

Aquí os dejo mi código:

Código HTML:

Ver original<body>
<section id="sergi"></section>
<section id="projects"></section>
<section id="social"></section>
<section id="email"></section>
</body>

Código CSS:

Ver originalhtml{
   height: 100%;
}
 
body {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -o-box;
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */
   margin: 0;
   height: 100%;
   width: 100% /* needed for Firefox */
   flex-direction: column;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -o-box-orient: vertical;
}
 
section {
   height: 25%;
   width: 100%;
}
 
#sergi{
   background-color: #e5e5e5;
}
 
#projects {
   background-color: #cbcaca;
}
 
#social {
   background-color: #aeacac;
}
 
#email {
   background-color: #8a8989;
}

Alguien me puede decir que me falta añadir para que se me muestre igual que en Safari y Chrome en el resto de navegadores? Quiero que se amontonen uno encima del otro ocupando el 100% del navegador.

Aquí está la web para que lo podáis ver: http://www.sergibeltran.com

Saludos!

pzin · #2 (**permalink**) 27/08/2013, 07:35

Yo normalmente no suelo usar body para la maquetación. Porque por una cosa u otra siempre da problemas.

Luego añade siempre los atributos sin prefijos, porque más de una vez no existen con y funcionan sin ellos. Por ejemplo:

Código CSS:

Ver originalflex-direction: column;

Que así si funciona en Firefox.

Pero lo dicho, lo de andar tocando el body (

) no es cosa buena.

Para los demás navegadores no sabría decirte, bueno, IE es el que falta. Sigo sin instalarlo.

Edito: Veo que si que lo tenías puesto, pero por alguna razón Firefox no lo aplica. Cámbialo por esto:

Código CSS:

Ver original-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;

De hecho la costumbre es ponerlo así, primero los prefijos propietarios y luego los buenos.

sergi_multimedia · #3 (**permalink**) 28/08/2013, 02:04

Hola Pzin, primero de todo gracias por contestar, ya está el tema resuelto! :)

Como me comentabas me faltaba poner el flex-direction sin prefijo, de esa manera tanto en Opera com Firefox me lo han reconocido, y me mostraba lo que yo me esperaba.

Por otra parte tendré en cuenta lo que me has comentado de la etiqueta body.

Un saludo, y gracias ;)

sergi_multimedia · #4 (**permalink**) 28/08/2013, 03:03

Cita:

Iniciado por pzin

Yo normalmente no suelo usar body para la maquetación. Porque por una cosa u otra siempre da problemas.

Luego añade siempre los atributos sin prefijos, porque más de una vez no existen con y funcionan sin ellos. Por ejemplo:

Código CSS:

Ver originalflex-direction: column;

Que así si funciona en Firefox.

Pero lo dicho, lo de andar tocando el body (

) no es cosa buena.

Para los demás navegadores no sabría decirte, bueno, IE es el que falta. Sigo sin instalarlo.

Edito: Veo que si que lo tenías puesto, pero por alguna razón Firefox no lo aplica. Cámbialo por esto:

Código CSS:

Ver original-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;

De hecho la costumbre es ponerlo así, primero los prefijos propietarios y luego los buenos.

Hola, me ha surgido otro duda.

Ahora utilizando la propiedad justify-content: space-around, me funciona en todos los navegadores menos en Safari (tanto OSX como iOS).

He estado informándome y Safari es compatible con la versiín antigua (la del 2009) donde no existe esa propiedad, donde si existe si que es en la versión híbrida(2011) y en la moderna(2012) pero Safari no es compatible.

Entonces, mi pregunta es no hay "cojones" de hacer "justify-content: space-around" o similar sin tener que hacer márgenes en Safari?

Saludos