Flexbox: Ejercicio 01

Contenido del nav como flexbox y alineado a la izquierda.

• display: flex;
• justify-content: flex-start;

Flexbox: Ejercicio 02

Contenido del nav como flexbox y alineado al centro.

• display: flex;
• justify-content: center;

Flexbox: Ejercicio 03

Contenido del nav como flexbox y alineado a la derecha.

• display: flex;
• justify-content: flex-end;

Flexbox: Ejercicio 04

Contenido del nav como flexbox y espacio entre "items".

• display: flex;
• justify-content: space-between;

Flexbox: Ejercicio 05

Contenido del nav como flexbox y espacio alrededor de los "items".

• display: flex;
• justify-content: space-around;

Flexbox: Ejercicio 06

Contenido del nav como flexbox y los items al 100%, es decir que ocupen todo el espacio del contenedor.

• display: flex;
• nav a{ width: 100%; }

Flexbox: Ejercicio 07

Contenido del nav como flexbox y los items alineados verticalmente.

• display: flex;
• flex-direction: column;

Flexbox: Ejercicio 08

Contenido del nav como flexbox y catálogo de imágenes.

• display: flex;

Flexbox: Ejercicio 09

Contenido del nav como flexbox y catálogo de imágenes. Imágenes con un margen de 10px;.

• article { display: flex; }
• img { border: dashed 1px #555; margin: 10px; }

Flexbox: Ejercicio 10

Contenido del nav como flexbox y catálogo de imágenes. Imágenes con un margen de 10px y un padding de 20px.

• article { display: flex; }
• img { border: dashed 1px #555; margin: 10px; padding: 20px;}

Flexbox: Ejercicio 11

Contenido del nav como flexbox y los items al 100% con las propiedades nowrap y wrap (las imágenes en una sola línea o las imágenes se "ajustan" a diferencias líneas).

• article { display: flex; }
• img { border: dashed 1px #555; margin: 10px;}
• artículo 1: #no-wrap {flex-wrap: nowrap}
• artículo 2: #wrap {flex-wrap: wrap}

Flexbox: Ejercicio 12

Agencia de viajes. En este ejercicio vamos a intentar aplicar lo aprendido de flexbox en los ejercicios anteriores. Aparece un nuevo concepto, el id, que permite identificar un objeto o caja. El id debe ser único para cada "caja".

• para identificar al árticulo 1 usamos: #articulo-1
• para identificar al árticulo 2 usamos: #articulo-2
• para identificar al árticulo 3 usamos: #articulo-3

Flexbox: Ejercicio 13

ViajesOne: En este ejercicio vamos a intentar aplicar lo aprendido de flexbox en los ejercicios anteriores.

Flexbox: Ejercicio 14

MisAficiones: En este ejercicio vamos a intentar aplicar lo aprendido de flexbox en los ejercicios anteriores.

Flexbox: Ejercicio 15

Pequeña tienda: En este ejercicio vamos a empezar a crear una página que parezca un Site Online.

Flexbox: Ejercicio 16

EXAMEN