Prerequisiti: Contenitore ed elementi flex.
Asse principale e asse trasversale
Asse principale e asse trasversale: fondamenti.
flex-direction stabilisce la direzione dell’asse principale. row segue la direzione inline; column segue la direzione del blocco. Nell’italiano orizzontale usuale corrispondono rispettivamente a riga e colonna. L’asse trasversale è perpendicolare. Giustificazione e allineamento devono essere interpretati rispetto agli assi, non imparati come orizzontale e verticale fissi.
Come funziona: asse principale e asse trasversale
Asse principale e asse trasversale: comportamento nel browser.
row-reverse e column-reverse invertono l’ordine visivo lungo l’asse. Non riscrivono l’ordine del documento né garantiscono una navigazione da tastiera coerente con la disposizione. Il progetto dovrebbe mantenere un ordine HTML sensato senza usare inversioni per correggere markup disordinato.
Scelte di utilizzo e limiti
Asse principale e asse trasversale: progetto e verifica.
Per osservare gli assi usa pochi elementi e un contenitore con spazio residuo. Cambia solo flex-direction prima di modificare altre proprietà. In questo modo capisci perché justify-content e align-items sembrano agire in direzioni diverse dopo il cambiamento.
Esempio commentato
Asse principale e asse trasversale: 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>Direzione e assi</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="gruppo"><div>Uno</div><div>Due</div><div>Tre</div></div>
</body>
</html>
File stile.css
.gruppo { display: flex; flex-direction: row; gap: 1rem; min-height: 12rem; border: 1px solid navy; }
.gruppo > div { padding: 1rem; background-color: #eef4fa; }
Risultato nel browser
L’asse principale iniziale segue la riga. gap mantiene distanze fra i figli.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
display | flex | Tipo di scatola e contesto di layout. |
flex-direction | row | Direzione dell’asse principale. |
gap | 1rem | Distanza fra elementi o tracce nel layout pertinente. |
min-height | 12rem | Limite inferiore all’altezza. |
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
LABORATORIO
Sperimentare: Asse principale e asse trasversale
L’asse principale iniziale segue la riga. gap mantiene distanze fra i figli.
Obiettivo: Comprendere e applicare asse principale e asse trasversale 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: Cambia row in column, senza modificare l’HTML.
- 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.
Gli elementi si dispongono lungo la colonna. L’ordine HTML Uno, Due, Tre rimane invariato.
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 | Gli elementi si dispongono lungo la colonna. L’ordine HTML Uno, Due, Tre rimane invariato. |
| 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
Mantieni la disposizione in colonna e usa un gap di 0.5rem.
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 { flex-direction: column; gap: 0.5rem; }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
Asse principale e asse trasversale: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale proprietà definisce l’asse principale? ▾
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.