Come consultare le proprietà CSS Flexbox

A cosa serve la scheda Flexbox

Flexbox Cheatsheet è un riferimento per consultare le proprietà CSS di Flexbox, i valori elencati, le relative descrizioni e alcuni esempi di layout. È adatto quando devi orientarti tra le impostazioni del contenitore e quelle dei singoli elementi, senza confondere la direzione dell’asse principale con l’allineamento sull’asse trasversale.

La consultazione parte dal risultato che vuoi ottenere: distribuire elementi, mandarli a capo, gestire gli spazi oppure modificare la crescita e l’ordine di un elemento. La scheda collega questi obiettivi alle proprietà pertinenti e mostra anche configurazioni per casi come contenuti centrati, barre di navigazione, card su più righe, colonne laterali, piè di pagina fissi e colonne di uguale larghezza.

Come consultare proprietà e valori

1. Individua se devi modificare il contenitore oppure un elemento al suo interno. Per il contenitore, consulta le sezioni relative a modalità di visualizzazione, direzione dell’asse principale, disposizione su più righe, allineamento sull’asse principale, allineamento sull’asse trasversale, allineamento di più righe e spaziatura. Per l’elemento, cerca crescita, riduzione, base iniziale, abbreviazione flex, allineamento individuale e ordine.
2. Apri la proprietà che corrisponde al problema. Leggi la descrizione e confronta i valori elencati prima di scegliere un’impostazione. Per esempio, se vuoi controllare lo spazio tra righe o colonne, esamina gap: la scheda riporta un valore di lunghezza e include 16px e 1rem come esempi.
3. Confronta il valore che stai usando con quello indicato come predefinito nella scheda. Tra i valori elencati figurano direzione row, nessun ritorno a capo, distribuzione principale all’inizio, allineamento degli elementi con stretch, crescita pari a zero, riduzione pari a uno, allineamento individuale automatico e ordine zero.
4. Scegli un esempio di layout vicino al tuo caso e adatta le proprietà mostrate al contenuto che stai organizzando. Usa l’esempio come riferimento per la configurazione CSS, non come verifica del risultato nel browser.

Come leggere il risultato

Il risultato della consultazione è materiale di riferimento: per ogni proprietà puoi aspettarti valori elencati, una descrizione e, quando pertinente, un esempio di disposizione CSS. La distinzione tra proprietà del contenitore e proprietà dell’elemento aiuta a capire dove applicare l’impostazione, mentre i valori predefiniti offrono un punto di confronto per una configurazione che non produce l’effetto atteso.

Gli esempi coprono schemi ricorrenti, ma la scheda non calcola il layout risultante e non mostra un’anteprima del browser. Dopo aver scelto le proprietà, verifica autonomamente il comportamento nel browser e nel contesto del tuo foglio di stile. La consultazione inoltre non sostituisce il controllo indipendente della documentazione CSS quando ti serve una verifica più ampia o specifica.

Esempio pratico

Stai organizzando una barra di navigazione con più elementi e vuoi scegliere le proprietà Flexbox prima di verificare il risultato nel browser.

Per una barra di navigazione, identifica il contenitore, consulta le sezioni su direzione, allineamento e spaziatura, quindi confronta l’esempio di barra di navigazione con la tua configurazione.

La consultazione restituisce una scheda con la descrizione della proprietà scelta, i valori elencati e, se pertinente, un esempio di layout CSS.

Limiti

• La scheda fornisce materiale di riferimento ed esempi CSS, ma non calcola il layout, non esegue una validazione CSS e non mostra un’anteprima del risultato nel browser.

Errori comuni

• Errore: cercare una proprietà dell’elemento quando il problema riguarda il contenitore, o viceversa. Correzione: stabilisci prima il livello da modificare e confronta l’impostazione con il valore predefinito riportato nella sezione pertinente.

Domande frequenti

Quali proprietà Flexbox devo consultare per prime?

Se devi controllare la disposizione generale, cerca le sezioni del contenitore: direzione, ritorno a capo, allineamenti e spaziatura. Se devi modificare un singolo elemento, consulta crescita, riduzione, base, allineamento individuale o ordine.

Quali valori posso usare per gap?

Se cerchi un valore per la distanza tra righe o colonne, consulta gap: la scheda presenta valori di lunghezza e riporta 16px e 1rem come esempi.

La scheda mostra i valori predefiniti di Flexbox?

Se vuoi controllare il punto di partenza, confronta la tua impostazione con i predefiniti elencati: tra questi ci sono row, nessun ritorno a capo, allineamento iniziale sull’asse principale e stretch per gli elementi.