G. `flex` 3

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Flex 3</title>
8	<meta name="viewport"
9	content="width=device-width">
10
11	<style>
12	body {
13	/* body ocupa toda la altura de
14	* visualización y se ajusta a
15	* los distintos modos del
16	* móvil. */
17	height: 100dvh;
18	margin: 0 0.5rem;
19	display: flex;
20	/* El despliegue se hace
21	* verticalmente.*/
22	flex-direction: column;
23	/* El contenido se centra
24	* horizontalmente.*/
25	align-items: center;
26	}
27
28	main {
29	/* El elemento crece si es
30	* necesario para llenar el
31	* flex. */
32	flex-grow: 1;
33	/* El elemento se estira para
34	* ajustarse al ancho del flex.
35	*/
36	align-self: stretch;
37	/* Si el elemento no cabe
38	* completamente en el espacio
39	* asignado, se ponen barras de
40	* desplazamiento.*/
41	overflow: auto;
42	}
43
44	aside {
45	/* Evita que margin y float se
46	* salgan del elemento. */
47	display: flow-root;
48	}
49	</style>
50
51	</head>
52
53	<body>
54
55	<h1>Flex 3</h1>
56
57	<main>
58	<p>
59	Este ejemplo usa display: flex
60	con orientación vertical.
61	</p>
62	<p>
63	Lorem ipsum dolor sit amet
64	consectetur adipisicing elit.
65	Omnis, eius. Quaerat alias
66	facilis recusandae, voluptate
67	cumque quod tenetur
68	necessitatibus exercitationem
69	beatae cupiditate iste
70	voluptatum, optio debitis
71	deserunt laboriosam placeat
72	odit?.
73	</p>
74	</main>
75
76	<aside>
77	<p>Se feliz 😁.</p>
78	</aside>
79
80	</body>
81
82	</html>