F. `flex` 2

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Flex 2</title>
8	<meta name="viewport"
9	content="width=device-width">
10
11	<style>
12	body {
13	display: flex;
14	flex-wrap: wrap;
15	/* Espacio horizontal entre
16	* elementos. */
17	row-gap: 1rem;
18	/* Espacio vertical entre
19	* elementos. */
20	column-gap: 0.5rem;
21	}
22
23	nav {
24	/* flex muestra main en el orden
25	* 1, o sea al inicio. */
26	order: 1;
27	}
28
29	main {
30	/* 1: Expande horizontalmente,
31	* 1: Contrae horizontalmente,
32	* 300px: Tamaño base. */
33	flex: 1 1 300px;
34	/* flex muestra main en el orden
35	* 2, o sea después de nav. */
36	order: 2;
37	}
38
39	aside {
40	/* flex muestra main en el orden
41	* 3, o sea después de main. */
42	order: 3;
43	}
44
45	nav,
46	aside {
47	/* 1: Expande horizontalmente,
48	* 1: Contrae horizontalmente,
49	* 200px: Tamaño base. */
50	flex: 1 1 200px
51	}
52	</style>
53
54	</head>
55
56	<body>
57
58	<main>
59	<h1>Flex 2</h1>
60	<p>
61	Este ejemplo usa display: flex
62	para una página principal.
63	</p>
64	<p>
65	flex-wrap: wrap permite que el
66	contenido se parta.
67	</p>
68	<p>
69	Este main se puede expander,
70	contraer y su tamaño base es de
71	300px
72	</p>
73	</main>
74
75	<nav>
76	<h2>Navegación</h2>
77	<p>
78	Este nav se puede expander o
79	contraer si es necesario y su
80	tamaño base es de 200px
81	</p>
82	<p>
83	<a href="https://facebook.com"
84	target="_blank"
85	rel="noreferrer">
86	Facebook</a>
87	</p>
88	</nav>
89
90	<aside>
91	<h2>Aside</h2>
92	<p>
93	Este aside se puede expander,
94	contraer y su tamaño base es de
95	200px
96	</p>
97	</aside>
98
99	</body>
100
101	</html>