Prerequisiti: Allineamento individuale con align-self.
Laboratorio: un menu e un gruppo di schede
Laboratorio: un menu e un gruppo di schede: fondamenti.
Un menu e un catalogo possono usare due contenitori flex indipendenti. Il menu organizza link, le schede organizzano contenuti più grandi. Separare i componenti evita che una regola unica debba risolvere esigenze diverse. I figli diretti di ciascun contenitore sono i suoi item.
Come funziona: laboratorio: un menu e un gruppo di schede
Laboratorio: un menu e un gruppo di schede: comportamento nel browser.
Per il menu usa ritorno a capo e gap; per le schede scegli una base minima ragionevole, crescita e riduzione. Conserva l’ordine HTML di lettura. Non riordinare le schede per ottenere un effetto grafico che diverge dalla navigazione. Un titolo lungo deve poter occupare più righe senza sparire.
Scelte di utilizzo e limiti
Laboratorio: un menu e un gruppo di schede: progetto e verifica.
Il criterio di riuscita è il comportamento, non una singola immagine: menu raggiungibile da tastiera, schede leggibili a larghezze diverse, spazi coerenti, assenza di tagli. Valida prima i singoli componenti e poi la pagina completa. Documenta perché scegli flex-basis e wrap.
Esempio commentato
Laboratorio: un menu e un gruppo di schede: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laboratorio: menu e schede con Flexbox</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<nav class="menu" aria-label="Argomenti"><a href="#html">HTML</a><a href="#css">CSS</a><a href="#web">Web</a></nav>
<div class="catalogo"><article id="html"><h2>HTML</h2><p>Struttura della pagina.</p></article><article id="css"><h2>CSS</h2><p>Presentazione della pagina.</p></article><article id="web"><h2>Web</h2><p>Risorse e collegamenti.</p></article></div>
</body>
</html>
File stile.css
.menu, .catalogo { display: flex; flex-wrap: wrap; gap: 1rem; }
.menu { margin-bottom: 2rem; }
.catalogo > article { flex: 1 1 14rem; min-width: 0; padding: 1rem; border: 1px solid navy; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid navy; outline-offset: 3px; }
Risultato nel browser
I contenitori condividono solo la disposizione di base; le dimensioni degli article sono una scelta del catalogo.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
display | flex | Tipo di scatola e contesto di layout. |
flex-wrap | wrap | Possibilità di distribuire gli item su più linee. |
gap | 1rem | Distanza fra elementi o tracce nel layout pertinente. |
margin-bottom | 2rem | Margine inferiore. |
flex | 1 1 14rem | Crescita, riduzione e dimensione di base dell’item flex. |
min-width | 0 | Limite inferiore alla larghezza. |
LABORATORIO
Sperimentare: Laboratorio: un menu e un gruppo di schede
I contenitori condividono solo la disposizione di base; le dimensioni degli article sono una scelta del catalogo.
Obiettivo: Comprendere e applicare laboratorio: un menu e un gruppo di schede attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 20 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Aggiungi una quarta scheda con titolo molto lungo e prova una finestra stretta.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Il gruppo cambia numero di righe senza richiedere coordinate; titolo e link restano utilizzabili.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Il gruppo cambia numero di righe senza richiedere coordinate; titolo e link restano utilizzabili. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Aggiungi al menu un quarto link e la corrispondente scheda senza modificare i selettori.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
<a href="#reti">Reti</a>
<!-- Aggiungi al catalogo: -->
<article id="reti"><h2>Reti</h2><p>Comunicazione fra sistemi.</p></article>Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Laboratorio: un menu e un gruppo di schede: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Perché menu e catalogo hanno contenitori distinti? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.