F. flex 2

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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 /* Alínea verticalmente el
15 * contenido cuando solo tiene
16 * 1 renglón, a la línea del
17 * primer renglón. */
18 align-items: baseline;
19 /* Si un elemento no cabe, se
20 * pasa al inicio del siguiente
21 * renglón. */
22 flex-wrap: wrap;
23 /* Alínea verticalmente el
24 * contenido cuando hay varios
25 * renglones, a la línea del
26 * primer renglón. */
27 align-content: baseline;
28 /* Espacio horizontal entre
29 * elementos. */
30 row-gap: 1rem;
31 /* Espacio vertical entre
32 * elementos. */
33 column-gap: 0.5rem;
34 }
35
36 nav {
37 /* flex muestra main en el orden
38 * 1, o sea al inicio. */
39 order: 1;
40 }
41
42 main {
43 /* 1: Expande horizontalmente,
44 * 1: Contrae horizontalmente,
45 * 300px: Tamaño base. */
46 flex: 1 1 300px;
47 /* flex muestra main en el orden
48 * 2, o sea después de nav. */
49 order: 2;
50 }
51
52 aside {
53 /* flex muestra main en el orden
54 * 3, o sea después de main. */
55 order: 3;
56 }
57
58 nav,
59 aside {
60 /* 1: Expande horizontalmente,
61 * 1: Contrae horizontalmente,
62 * 200px: Tamaño base. */
63 flex: 1 1 200px
64 }
65 </style>
66
67</head>
68
69<body>
70
71 <main>
72 <h1>Flex 2</h1>
73 <p>
74 Este ejemplo usa display: flex
75 para una página principal.
76 </p>
77 <p>
78 flex-wrap: wrap permite que el
79 contenido se parta.
80 </p>
81 <p>
82 Este main se puede expander,
83 contraer y su tamaño base es de
84 300px
85 </p>
86 </main>
87
88 <nav>
89 <h2>Navegación</h2>
90 <p>
91 Este nav se puede expander o
92 contraer si es necesario y su
93 tamaño base es de 200px
94 </p>
95 <p>
96 <a href="https://facebook.com"
97 target="_blank"
98 rel="noreferrer">
99 Facebook</a>
100 </p>
101 </nav>
102
103 <aside>
104 <h2>Aside</h2>
105 <p>
106 Este aside se puede expander,
107 contraer y su tamaño base es de
108 200px
109 </p>
110 </aside>
111
112</body>
113
114</html>
skip_previous skip_next