¿Es correcto este CSS o cambiaríais algo?

[quico5]

Código HTML:

body {
	background: silver;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

	font-family: arial, sans-serif;
	margin: 0;
	text-align: center;
}
body>* { /** PRUEBAS VISUALES **/
	background: white;
	box-shadow: 0 0 1px 0 silver;
	flex: 1 100%;
	padding: 1em 0;
}
nav {
	display: inherit;
	justify-content: space-around;
	a {
		color: #333;
		text-decoration: none;
	}
}
@media all and (min-width: 601px) {
	header, nav, aside { flex: 1 auto; }
	header  {width: 20%;}
	nav     {width: 80%;}
}
@media all and (max-width: 600px) {
	nav { order: 2; }
	footer { order: 1; }
}

@media all and (min-width: 801px) {
	main    { flex: 3 0px; }
	header  { order: 1; }
	nav     { order: 2; }
	.aside1 { order: 3; }
	main    { order: 4; }
	.aside2 { order: 5; }
	footer  { order: 6; }
}

[juangemelo01]

Código:

body {
	background: silver;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

	font-family: arial, sans-serif;
	margin: 0;
	text-align: center;
}

yo hasta donde tengo entendido, la propiedad de Display:flex se recomienda en algun contenedor o caja, No es recomendable usar FlexBox para crear la disposición de toda la página

Código:

body>* { /** PRUEBAS VISUALES **/
	background: white;
	box-shadow: 0 0 1px 0 silver;
	flex: 1 100%;
	padding: 1em 0;
}

no se por que utilizas esto amigo

Código:

nav {
	display: inherit;
	justify-content: space-around;
	a {
		color: #333;
		text-decoration: none;
	}
}

¿por que pones display: inherit;? ¿si te funciona el estilo que le das al hipervinculo del nav?, yo por lo general lo pondria de la siguiente manera

Código:

nav {
	display: inherit;
	justify-content: space-around;
}
nav a {
		color: #333;
		text-decoration: none;
}

Código:

@media all and (min-width: 601px) {
	header, nav, aside { flex: 1 auto; }
	header  {width: 20%;}
	nav     {width: 80%;}
}

no estoy seguro si sea posible asignarle un mismo valor a 3 etiquetas, hasta donde tenia entendido, se le daba un valor diferente, para que aparecieran en ese orden.

yo creo que para poder responder mejor la pregunta si ¿esta correcto o le cambiaria algo? seria
1) ver al menos la estructura en imagen de lo que quieres hacer, lo digo por que veo que faltan algunas etiquetas extra
2) ver y hacer un análisis estadístico sobre los navegadores compatibles que hay con esta tecnología, con la finalidad de que el usuario final pueda disfrutar de la navegación
en mi caso, que soy de México, las estadísticas que tengo sobre mi país son las siguientes
Enero 2014 - Octubre 2014
Uso de dispositivos móviles 28.13% (Celulares 21.82, Tablets 6.31)
PC 71,87%

Estos resultados afirman que hay que utilizar tecnología web para la programación de sitios móviles, por tener un 30% del mercado Nacional, pero, para determinar si es buen momento de usar display Flex o no, nos lo determinaran otras gráficas
Navegadores para PC en Mexico
Tenemos a Chrome con sus diferentes versiones como el rey de los Navegadores a nivel Nacional con el 58.3%, después tenemos a firefox con el 12.59% (en las versiones 5+)

pero, tenemos a 4 IE que sumados nos da el 22.41% (IE11 9.11%, IE10 5.07%, IE8 4.85%, IE9 3.38%)
En el caso de safari, 1.97% esta por debajo de la versión 7 y 1.79% esta en la versión 7, una vez que tenemos estos datos en cuenta, podemos compararlos con nuestra tabla de compatibilidad con FLEXBOX

si hacemos sumas de los porcentajes de IE8 e IE9, 4.85% + 3.38% un total de 8.23% considerable, es casi el mismo resultado que nos da la misma imagen de la diferencia de 100%- 91.67% = 8.33%
Los usuarios de PC que podrían navegar sin tanto problema en México seria el 65.87% (considerando que 71.87% seria nuestro 100% y que el 8% de 71.85% es 5.98%)
también tenemos gráficas donde se involucran los dispositivos móviles


pero, a la falta de información específica sobre las versiones de los navegadores para dispositivos móviles, + la mezcla que hace en estas estadísticas con los navegadores para PC, es muy pronto para dar una valoración estadística cuantitativa sobre display:flex en los dispositivos móviles, tal vez en lo que me podría basar para tener un numero seria en el resultado de la resta de 100%- 73.95% que no requieren prefijos, esto me daria un total de 26.05%, aplicando esto a nuestro 28.13% tendria un 20.81%
haciendo la sumatoria de los usuarios que podrían disfrutar de la web usando display flex seria 65.87% + 20.81 =86.68% dejando fuera un 13.32%.

Como conclusión, es bueno empezar a introducirme a esta tecnología, pero, tal vez esperaría unos 6 meses mas o 1 año para ver como evoluciona las estadísticas y ver que ese 13% por lo menos disminuya a menos del 5%
Por ultimo, dejo los enlaces de las estadisticas que genere
http://caniuse.com/#search=flexbox
http://gs.statcounter.com/#all-compa...310-201410-bar
espero que mi respuesta te sirva de algo amigo, cualquier cosa, comenta

[quico5]

Gracias por responder juangemelo01

por las capturas se ve que se abren nuevas posibilidades, en caso de ausencia de soporte podemos tirar de display:table; para salir del paso agregando apenas alguna instrucción CSS a mayores




http://caniuse.com/#feat=css-table

Es algo pronto "display:flex;" pero ciertas estructuras facilitan una solución clásica y simple

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8"/>
	<title>Document</title>
	<style>
		main,section{
			display:table; //IE8-9-[10] y OPERA MOBILE para mostrar las columnas en altas resoluciones
			display:flex;  //para mostrar las columnas en altas resoluciones
		}
		/*los anchos de los hijos se pueden aplicar mediante width siendo aceptado en flex*/
		main>*,section>*{display:table-cell\0;} /* IE8-9 */ creo que no es necesario pero lo pongo por si acaso
	</style>
</head>
<body>
	

	<header></header>
	<nav></nav>
	<main>
		<section>
			<article></article>
			<article></article>
			<article></article>
		</section>
		<aside></aside>
	</main>
	<footer></footer>
	
</body>
</html> 

Colores de resaltado del layout

Código HTML:

body>* { /** PRUEBAS VISUALES **/
	background: white;
	box-shadow: 0 0 1px 0 silver;
	flex: 1 100%;
	padding: 1em 0;
}

display: inherit; //HEREDA del padre BODY, ¿mala practica en este caso?
Es css anidado del procesador LESS, al compilarse deja de estar anidado para ser compactible

Código HTML:

nav {
	display: inherit;
	justify-content: space-around;
	a {
		color: #333;
		text-decoration: none;
	}
}

Por lo general CSS permite configurar un conjunto ¿lo leíste en algún lado?

Código HTML:

header, nav, aside { flex: 1 auto; }

[quico5]

Un Hack así parece mas limpio para los validadores de código

Código:

if(doc=document.documentElement) {
	//document.documentElement.className+=' ie'+document.documentMode;
	doc.setAttribute('data-hack', 'ie'+document.documentMode);
}

Código:

<html class=" ie11"></html>
<html data-hack="ie11"></html>

[juangemelo01]

Gracias por los tips, estan bastante claros
ayer me puse a hacer experimentos con css y me di cuenta que mis animaciones no funcionaban en movil, de tanto buscar encontré esta pagina hecha por Lea Verou http://css3test.com/
hace un test vastante completo sobre varias compatibilidades en css, y me tope con bastantes cosas interesantes, entre ellas encontré que opera mini versión 7.2 no es compatible con flex-box (0% de compatibilidad ) y tampoco lo es con el navegador geeko que trae por default (lo mas triste fue ver que no es compatible con los steps() de la propiedad animation-timing-function)
intentare hacer varios test con algunos amigo para hacer estadísticas propias, cuando las tenga, compartiere mis resultados