FlexBox1)  

1. Crea una capa contenedora de ancho 850px y en su interior tres capas header, centro y footer a las que le fijaremos sólo la altura y un color de fondo.
2. Dentro de la capa centro crear las capas section y nav a las que le fijaremos sólo la altura y un color de fondo.
3. Centra la capa contenedora.
4. Observa el resultado en el navegador

 

1. Añade la propiedad display: -webkit-box al  contenedor (coloca los prefijos necesarios para todos los navegadores) y alineación vertical. Observa el resultado

→ No hay cambios.

1. Haz lo mismo en la capa centro pero con orientación horizontal. Observa el cambio: →Nav y section se han colocado una a continuación de la otra  (como con float),  y el ancho de las dos capas esta ajustado al contenido.
2. Añade la propiedad box-flex:1; en las capas nav y section. Observa como las dos capas cubren todo el espacio  y son del mismo tamaño.
3. Añade la propiedad box-flex:3; en la capa section. Observa como el acho de section es tres veces mayor que el de nav.
4. Crea dos nuevas capas article dentro de la capa section con las cabeceras Articulo1 y Articulo2 respectivamente. Añade texto “Lorem and more”.

Observa el resultado → la capa section se ha adaptado a los párrafos añadido y la capa menú se ha reajustado.

1. Corregimos la presentación del menú fijando el ancho de la capa nav a 180px y eliminamos la propiedad box-flex. Observa en el navegador.
2. Vamos a posicionar el menú a la derecha. ¿Sabrías hacerlo de forma sencilla?
3. Por último nos gustaría tener un diseño líquido. Empequeñece la ventana del navegador y observa como nuestra página no se adapta. ¿Sabes cuáles son las modificaciones a realizar para que la página se adapte a cualquier tamaño?.

Orientaciones: Convierte el body en box y el contenedor en box-flex. O haz el ancho del body en %.