Laboratorio CSS Flexbox

Laboratorio CSS Flexbox

Il Laboratorio CSS Flexbox è un ambiente di apprendimento interattivo e un generatore di codice per il moderno modulo CSS Flexible Box Layout. Regola le proprietà del contenitore (flex-direction, justify-content, align-items, gap) e le proprietà per ogni elemento (flex-grow, flex-shrink, flex-basis, align-self, order) e osserva l'aggiornamento del tuo layout in tempo reale. Quando ottieni qualcosa che ti piace, copia il CSS e l'HTML pronti da incollare direttamente nel tuo progetto.

Cos'è il CSS Flexbox?

Il CSS Flexbox (Flexible Box Layout) è un modello di layout unidimensionale progettato per distribuire lo spazio lungo un singolo asse (una riga o una colonna) e allineare gli elementi all'interno di un contenitore. Sostituisce le vecchie tecniche come i float e i trucchi inline-block per barre di navigazione, righe di schede, contenuti centrati e qualsiasi interfaccia utente in cui gli elementi devono adattarsi naturalmente al loro contenitore. A differenza del CSS Grid, che è bidimensionale, Flexbox eccelle nelle disposizioni più semplici in cui si controlla l'allineamento in una sola direzione alla volta.

Come usare questo laboratorio

1. Scegli un preset (opzionale): Scegli Holy Grail, Card Grid, Navbar, Hero, Modal o Sticky Footer per caricare un punto di partenza reale. Ogni preset è un layout completo e funzionante che puoi studiare o modificare.
2. Regola le proprietà del contenitore: Usa i controlli segmentati nel pannello a destra per impostare flex-direction, flex-wrap, justify-content, align-items, align-content e gap. La scena visiva si aggiorna immediatamente.
3. Modifica i singoli elementi: Fai clic su qualsiasi elemento nell'anteprima per selezionarlo. Sovrascrivi il suo order, flex-grow, flex-shrink, flex-basis e align-self indipendentemente dagli altri. Gli elementi con sovrascritture sono contrassegnati da un piccolo distintivo.
4. Aggiungi o rimuovi elementi: Usa Aggiungi elemento e Rimuovi selezionato per cambiare il numero di elementi e vedere come risponde il layout.
5. Copia il codice: La sezione Codice Generato in basso riflette sempre il tuo layout attuale. Copia CSS, HTML o entrambi con un solo clic.

Riferimento proprietà del contenitore

Il contenitore flex è l'elemento genitore con display: flex. Queste proprietà controllano come si comportano tutti i suoi figli insieme.

Riferimento proprietà degli elementi

Queste proprietà si applicano ai singoli elementi flex (figli di un contenitore flex) e sovrascrivono le impostazioni predefinite del contenitore solo per quell'elemento.

Qual è la differenza tra justify-content e align-items?

justify-content controlla l'allineamento lungo l'asse principale, mentre align-items controlla l'allineamento lungo l'asse trasversale. L'asse principale è la direzione impostata da flex-direction — orizzontale per row, verticale per column. Quando si cambia flex-direction da row a column, i due assi si scambiano, quindi justify-content diventa verticale e align-items diventa orizzontale. Questo scambio è una delle fonti più comuni di confusione per chi impara il Flexbox; gli indicatori degli assi del laboratorio sotto l'anteprima aiutano a renderlo visibile.

Come si centra un elemento con Flexbox?

Per centrare un singolo elemento sia orizzontalmente che verticalmente:

Questo è il sostituto moderno per i vecchi trucchi di centratura che coinvolgevano margin: auto, transform: translate(-50%, -50%) o position: absolute. Provalo nel laboratorio selezionando il preset Modal Center.

Spiegazione dei preset di layout reali

Holy Grail Layout

Il classico layout di pagina a tre colonne: barra laterale sinistra, contenuto principale, barra laterale destra — con un'intestazione e un piè di pagina. Storicamente molto difficile da costruire con i float; Flexbox lo rende banale. La colonna centrale usa flex: 1 in modo da assorbire tutto lo spazio orizzontale rimanente mentre le colonne laterali mantengono le larghezze dichiarate.

Card Grid

Una riga di schede che vanno a capo su nuove righe man mano che il viewport si restringe. Usa flex-wrap: wrap con ogni scheda a cui viene assegnato flex: 1 1 240px, il che significa che la scheda cresce e si restringe ma non diventa mai più stretta di 240px.

Navbar

Una barra di navigazione orizzontale con un logo a sinistra e link a destra. Il trucco è justify-content: space-between con il logo e il gruppo di link come i due figli, più un contenitore flex interno per i link stessi.

Hero Section

Pila verticale con contenuto centrato sia orizzontalmente che verticalmente — perfetto per le aree hero delle landing page. Usa flex-direction: column, justify-content: center e align-items: center su un contenitore alto.

Modal Center

Una finestra modale perfettamente centrata all'interno del suo overlay. La stessa ricetta di centratura in tre righe mostrata sopra, applicata a un contenitore overlay a schermo intero.

Sticky Footer

Un piè di pagina che sta in fondo al viewport quando il contenuto è breve, ma viene spinto giù quando il contenuto è lungo. Si ottiene dando al body display: flex; flex-direction: column; min-height: 100vh e al contenuto principale flex: 1.

Qual è la differenza tra flex-grow, flex-shrink e flex-basis?

Queste tre proprietà (combinate nella scorciatoia flex) descrivono come un elemento gestisce lo spazio:

• flex-basis imposta la dimensione ideale dell'elemento prima che venga distribuito lo spazio libero. Pensa ad esso come al "punto di partenza" dell'elemento.
• flex-grow dice "se c'è spazio rimanente, prendi questa quota". Un valore di 0 significa rifiutarsi di crescere; 1 significa crescere proporzionalmente; 2 significa prendere il doppio della quota di un elemento con 1.
• flex-shrink dice "se non c'è abbastanza spazio, restringiti di questa quota". Il predefinito è 1 (restringimento proporzionale); 0 significa rifiutarsi di restringersi.

La scorciatoia flex: 1 si espande in flex: 1 1 0% — crescita uguale, restringimento uguale, base zero — il che significa che tutti gli elementi occupano una quota uguale del contenitore indipendentemente dal contenuto. flex: auto si espande in flex: 1 1 auto, che rispetta la dimensione del contenuto come base.

Quando dovrei usare Flexbox rispetto a Grid?

Usa Flexbox per layout unidimensionali in cui gli elementi scorrono in una singola direzione — una riga di pulsanti, una barra di navigazione, una singola colonna di schede. Flexbox è orientato al contenuto ed è ottimo quando vuoi che gli elementi si dimensionino da soli.

Usa CSS Grid per layout bidimensionali in cui è necessario controllare contemporaneamente sia le righe che le colonne — layout di pagina intera, gallerie di immagini, dashboard. Grid è orientato al layout e ti consente di posizionare gli elementi in tracce nominate.

I due sono complementari, non in competizione. Molti design reali li combinano: un layout di pagina Grid con barre di navigazione Flexbox e righe di schede all'interno.

Suggerimenti per padroneggiare Flexbox

• Visualizza gli assi. Sappi sempre quale direzione è "principale" e quale è "trasversale" — i pill degli assi del laboratorio lo rendono esplicito.
• Usa gap invece dei margini. I browser moderni supportano pienamente gap sui contenitori flex ed elimina la necessità di scomodi trucchi di margine sull'ultimo figlio.
• Affidati a flex: 1. Quando vuoi che gli elementi condividano lo spazio equamente, questa scorciatoia è quasi sempre ciò che desideri.
• min-width: 0 sugli elementi flex. Gli elementi hanno una larghezza minima implicita basata sul loro contenuto. Se stringhe lunghe non interrompibili (come gli URL) fanno traboccare il tuo layout, imposta min-width: 0 sull'elemento per sovrascriverlo.
• Evita larghezze solo in percentuale. Mescolare larghezze in percentuale con flex-grow può produrre risultati sorprendenti. Preferisci flex-basis con un valore predefinito sensato.

Supporto browser e compatibilità

Il CSS Flexbox è supportato in ogni browser moderno inclusi Chrome, Firefox, Safari, Edge e tutti i principali browser mobili. La proprietà gap nei contenitori flex ha raggiunto il supporto universale nel 2021. I browser legacy più vecchi (IE10/11) richiedono prefissi fornitore e presentano diversi bug ben documentati; per quel pubblico, considera flexbugs.

Domande frequenti

Perché il mio elemento flex trabocca dal contenitore?

Gli elementi flex hanno un min-width: auto implicito basato sul loro contenuto. Parole lunghe, blocchi di codice o testo pre-formattato possono forzare un elemento a essere più largo del contenitore. Risolvilo impostando min-width: 0 sull'elemento (o min-height: 0 per i layout a colonna).

Qual è la differenza tra space-between, space-around e space-evenly?

space-between non mette spazio alle estremità e mette spazio uguale tra gli elementi. space-around mette mezzo spazio a ogni estremità e spazi interi tra gli elementi. space-evenly mette spazio uguale alle estremità e tra gli elementi. Alternali nel laboratorio per sentire la differenza.

Posso animare le proprietà flex?

Sì. flex-grow, flex-shrink, flex-basis, order e gap possono essere transizionati. L'animazione di flex-direction, justify-content e align-items non è supportata perché sono proprietà discrete enumerate.

Il laboratorio funziona offline?

Tutti i calcoli Flexbox avvengono nel tuo browser utilizzando CSS nativo. Una volta caricata la pagina, puoi usare il laboratorio senza una connessione internet — non ci sono chiamate API o elaborazioni lato server.

Il codice generato è pronto per la produzione?

Sì. Il CSS esportato utilizza proprietà standard supportate in ogni browser evergreen. L'HTML utilizza nomi di classe semantici (flex-container, flex-item) che puoi rinominare per adattarli alle convenzioni del tuo progetto.

Risorse aggiuntive

• CSS Flexible Box Layout - MDN
• Modulo CSS Flexible Box Layout Livello 1 - Specifica W3C
• CSS Flex Box Layout - Wikipedia

Altri strumenti correlati:

Strumenti per webmaster:

• Calcolatore CPC
• Calcolatore CPM
• Compressore CSS Online
• Generatore di favicon Nuovo
• Calcolatore di AdSense di Google
• Generatore di Cron Job In Primo Piano
• Generatore di Espressione Crontab Nuovo
• Compressore di HTML Online
• Convertitore HTML in Testo
• Verificatore di Densità delle Parole Chiave Nuovo
• Generatore di tabelle Markdown In Primo Piano
• Generatore di Meta Tag
• Rimuovi Virgolette Intelligenti In Primo Piano
• Generatore di Slug URL In Primo Piano
• Calcolatore del Valore di una Visualizzazione di Pagina
• Calcolatore del Valore di un Visitatore
• Calcolatore di Permessi Unix (chmod) In Primo Piano
• Codificatore/Decodificatore di Entità HTML In Primo Piano
• Generatore di Lorem Ipsum Nuovo
• Escape/Unescape di stringhe JSON In Primo Piano
• Convertitore cURL in JSON Nuovo
• Formattatore SQL Nuovo
• Ottimizzatore SVG Nuovo
• Generatore di Redirect .htaccess Nuovo
• Verificatore Dimensione Scansione Googlebot Nuovo
• Generatore robots.txt Nuovo
• Generatore di Sitemap XML Nuovo
• Verificatore Età Dominio Nuovo
• Verificatore Open Graph Nuovo
• Ricerca WHOIS Nuovo
• Ricerca DNS Nuovo
• Verificatore Velocità Pagina Nuovo
• Verificatore Fiducia Dominio Nuovo
• Controllo Reindirizzamenti Nuovo
• Generatore di Tag Hreflang Nuovo
• Controllo Link Non Funzionanti Nuovo
• Laboratorio CSS Flexbox Nuovo