E. flex 1

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 1</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 menu {
13 --gap: 0.5rem;
14 display: flex;
15 /* Quita las viñetas. */
16 list-style-type: none;
17 margin: 0;
18 padding: var(--gap);
19 /* Espacio entre elementos. */
20 gap: var(--gap);
21 border: solid;
22 /* Centra verticalmente el
23 * contenido. */
24 align-items: center;
25 }
26
27 #enLinea {
28 display: inline-flex;
29 }
30
31 .creceMargenFinal {
32 margin-inline-end: auto
33 }
34 </style>
35
36</head>
37
38<body>
39
40 <h1>Flex 1</h1>
41
42 <menu>
43 <li><button>≡</button></li>
44 <li class="creceMargenFinal">
45 Ejemplo de flex
46 </li>
47 <li><button>💾</button></li>
48 <li><button>🗑</button></li>
49 </menu>
50
51 Inicio
52 <menu id="enLinea">
53 <li><button>≡</button></li>
54 <li class="creceMargenFinal">
55 Ejemplo de flex
56 </li>
57 <li><button>💾</button></li>
58 <li><button>🗑</button></li>
59 </menu>
60 Fin
61
62</body>
63
64</html>

Solo para los más rudos

skip_previous skip_next