Prerequisiti: Spaziatura con gap.
Ritorno a capo degli elementi flex
Ritorno a capo degli elementi flex: fondamenti.
Flexbox usa normalmente nowrap: gli elementi restano su un’unica linea e il calcolo delle dimensioni può ridurli o farli traboccare. flex-wrap: wrap permette nuove linee quando le dimensioni non trovano spazio. Il browser non decide automaticamente di andare a capo soltanto perché il testo sembra stretto.
Come funziona: ritorno a capo degli elementi flex
Ritorno a capo degli elementi flex: comportamento nel browser.
Ogni linea flex distribuisce i propri elementi secondo dimensioni e spazio disponibile. Flexbox rimane un sistema orientato a un asse: gli elementi di righe diverse non formano necessariamente colonne perfettamente allineate. Quando il rapporto fra righe e colonne è essenziale, Grid può essere più adatto.
Scelte di utilizzo e limiti
Ritorno a capo degli elementi flex: progetto e verifica.
La possibilità di andare a capo deve essere accompagnata da basi e minimi ragionevoli. Una min-width eccessiva può impedire l’adattamento. Contenuti molto lunghi possono imporre minimi automatici: controlla gli item e non aggiungere overflow hidden per far sparire il problema.
Esempio commentato
Ritorno a capo degli elementi flex: 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>Ritorno a capo con flex-wrap</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="gruppo"><article>Prima scheda</article><article>Seconda scheda</article><article>Terza scheda</article></div>
</body>
</html>
File stile.css
.gruppo { display: flex; flex-wrap: wrap; gap: 1rem; }
.gruppo > article { flex: 0 1 14rem; padding: 1rem; border: 1px solid navy; box-sizing: border-box; }
Risultato nel browser
Le schede partono da una base di 14rem e possono formare nuove linee quando lo spazio manca.
| 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. |
flex | 0 1 14rem | Crescita, riduzione e dimensione di base dell’item flex. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
LABORATORIO
Sperimentare: Ritorno a capo degli elementi flex
Le schede partono da una base di 14rem e possono formare nuove linee quando lo spazio manca.
Obiettivo: Comprendere e applicare ritorno a capo degli elementi flex attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 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: Confronta wrap e nowrap in una finestra di larghezza ridotta.
- 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.
Con wrap possono comparire più linee. Con nowrap gli item cercano di restare sulla stessa linea secondo le regole di riduzione.
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 | Con wrap possono comparire più linee. Con nowrap gli item cercano di restare sulla stessa linea secondo le regole di riduzione. |
| 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
Permetti alle schede anche di crescere nello spazio disponibile.
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.
.gruppo > article { flex: 1 1 14rem; }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
Ritorno a capo degli elementi flex: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale valore abilita nuove linee flex? ▾
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.