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 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!