Se hai mai lottato con i float o hai cercato disperatamente di centrare un div verticalmente a colpi di margini percentuali, ho una buona notizia: non devi più farlo.
Flexbox ha risolto un problema che CSS trascinava da anni. Prima, allineare elementi verticalmente richiedeva trucchi con display: table, o position: absolute con transform: translateY(-50%): codice che funzionava finché qualcosa non cambiava e crollava tutto. Con Flexbox, lo stesso risultato si ottiene in due proprietà, e funziona davvero.
In questo flexbox tutorial trovi tutto quello che serve: dalla relazione tra container e items, ai pattern responsive che uso ogni giorno sul lavoro, fino alle domande che tornano più spesso nei forum italiani.
Come funziona display: flex in CSS?
display: flex è una singola dichiarazione CSS che trasforma un elemento da contenitore normale a flex container, cambiando le regole con cui i suoi figli si posizionano nello spazio.
Per capire perché è un cambiamento vero, bisogna ricordare da dove si veniva. In un layout tradizionale ogni div è un blocco che occupa l’intera larghezza disponibile e si impila sotto al precedente. Affiancare due div richiedeva i float, con tutto il circo del clearfix. Centrare qualcosa verticalmente era una caccia al trucco giusto, e il trucco giusto dipendeva dal contesto.
Quando scrivi display: flex su un elemento, i figli diretti smettono di comportarsi come blocchi indipendenti e diventano flex items: rispondono collettivamente alle regole che imposti sul container genitore.
html
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>css
.container {
display: flex;
/* I tre box si affiancano in riga automaticamente.
Nessun float. Nessun trucco. */
}Il comportamento che vedi subito, con gli elementi in riga orizzontale, è già il risultato di valori impliciti che Flexbox applica senza che tu li scriva: flex-direction: row, flex-wrap: nowrap, justify-content: flex-start, align-items: stretch. Vale la pena saperlo, perché quando qualcosa non si comporta come ti aspetti, spesso la causa è uno di questi default.
Un dettaglio che sfugge spesso: display: flex agisce solo sui figli diretti, non sui nipoti. Se un elemento figlio contiene a sua volta altri elementi, quei nipoti non diventano flex items a meno che tu non metta un display: flex anche sul figlio. Flexbox si propaga esplicitamente, non per ereditarietà.
Qual è la differenza tra display: flex e display: inline-flex?
La differenza non sta in come vengono trattati i figli: in entrambi i casi il comportamento interno è identico. Cambia come il container si relaziona agli elementi che lo circondano.
Con display: flex il container si comporta come un blocco: occupa l’intera larghezza disponibile, va a capo prima e dopo, esattamente come un div normale. Con display: inline-flex il container occupa solo lo spazio del suo contenuto e può stare affiancato ad altri elementi sulla stessa riga, come farebbe uno span.
css
/* Il container occupa tutta la larghezza disponibile */
.navbar {
display: flex;
justify-content: space-between;
}
/* Il container si restringe attorno al suo contenuto,
può stare inline con il testo circostante */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
}inline-flex serve per componenti piccoli che devono vivere dentro al testo: badge, tag, bottoni con icona affiancata, chip. Per qualsiasi layout di pagina, usa flex.
Un modo per fissarlo in memoria: è la stessa logica di display: block contro display: inline-block. Il prefisso “block” o “inline” descrive il container rispetto all’esterno, il “flex” descrive quello che succede dentro.
Il modello container-items: flex container e flex items
Prima di parlare di proprietà specifiche, c’è una cosa sola da tenere presente: Flexbox lavora sulla relazione tra un contenitore e i suoi figli diretti, non sull’elemento isolato. Tutto il resto segue da qui.
Il flex container è l’elemento su cui dichiari display: flex. Le proprietà che si applicano a lui, come flex-direction, justify-content, align-items, flex-wrap e gap, non controllano l’elemento stesso: stabiliscono le regole per i figli.
I flex items sono i figli diretti. Le proprietà che si applicano a loro, come flex-grow, flex-shrink, flex-basis, align-self e order, permettono a ciascun elemento di personalizzare il proprio comportamento rispetto alle regole del container.
Il sistema degli assi
Flexbox lavora su due assi: l’Asse Principale (Main Axis) e l’Asse Trasversale (Cross Axis). Capire questi due concetti risolve buona parte della confusione che le persone hanno con Flexbox.
La proprietà flex-direction decide quale dei due è il principale. Con row (il default), l’asse principale corre in orizzontale da sinistra a destra e l’asse trasversale scende in verticale. Con column si invertono: il principale scende verticalmente, il trasversale va in orizzontale.
css
.container {
display: flex;
flex-direction: row; /* asse principale orizzontale */
}
.container-verticale {
display: flex;
flex-direction: column; /* asse principale verticale */
}Il punto dove quasi tutti si bloccano: justify-content agisce sempre sull’asse principale e align-items agisce sempre sull’asse trasversale, indipendentemente da quale direzione è attiva. Quando passi a column, non cambiano le proprietà che usi, cambiano gli assi su cui lavorano. Quindi justify-content: center con flex-direction: column centra verticalmente, non orizzontalmente. Non è un bug: è proprio così che funziona.
Prova tu stesso: cambia flex-direction e osserva come si spostano gli assi
Come si usa justify-content in CSS?
justify-content controlla come viene distribuito lo spazio sull’asse principale. Quando i flex items non riempiono completamente il container, questa proprietà decide dove finisce quello spazio vuoto.
css
.container {
display: flex;
justify-content: center;
}I valori che usi in quasi ogni progetto sono sei. flex-start (il default) allinea tutto all’inizio dell’asse, quindi a sinistra in un layout row. flex-end spinge tutto alla fine. center centra.
I tre valori con “space” fanno cose diverse con lo spazio vuoto. Con space-between il primo elemento tocca il bordo sinistro, l’ultimo tocca il bordo destro, e lo spazio rimanente si divide equamente tra gli elementi. Con space-around ogni elemento riceve la stessa quantità di spazio sia prima che dopo di sé: lo spazio visibile tra due elementi risulta quindi il doppio di quello ai bordi. Con space-evenly lo spazio è identico ovunque, bordi compresi.
css
.space-between { justify-content: space-between; }
/* |[1] [2] [3]| */
.space-around { justify-content: space-around; }
/* | [1] [2] [3] | */
.space-evenly { justify-content: space-evenly; }
/* | [1] [2] [3] | */Con flex-direction: column tutto questo funziona in verticale. justify-content: space-between distribuisce i figli lungo l’asse verticale, non quello orizzontale. La proprietà non cambia, cambia l’asse su cui opera.
Clicca su ogni valore per vedere come viene distribuito lo spazio
Come si centra un elemento con Flexbox (orizzontalmente e verticalmente)?
La centratura perfetta, sia orizzontale che verticale, è stata storicamente il problema più fastidioso del CSS. Prima di Flexbox servivano soluzioni diverse a seconda del contesto: position: absolute con transform, display: table-cell, line-height uguale all'altezza del container. Nessuna era davvero pulita.
Con Flexbox bastano tre righe sul container:
css
.container {
display: flex;
justify-content: center; /* sull'asse principale (orizzontale) */
align-items: center; /* sull'asse trasversale (verticale) */
}Per centrare rispetto all'intera viewport:
css
.pagina-centrata {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Questo pattern lo uso per landing page hero, pagine 404, overlay, loader, modali. A un certo punto smetti di pensarci e lo scrivi meccanicamente.
C'è anche un caso meno ovvio: centrare un singolo elemento dentro un container Flexbox senza toccare il posizionamento degli altri. In questo caso margin: auto sull'elemento specifico fa quello che serve: in un contesto Flex, margin: auto assorbe tutto lo spazio disponibile nella direzione in cui lo applichi, spingendo l'elemento verso il bordo opposto.
css
.container {
display: flex;
align-items: flex-start; /* tutti in alto */
}
.elemento-centrato {
margin: auto; /* questo si centra sia orizzontalmente che verticalmente */
}Per centralizzare solo verticalmente un singolo elemento mantenendo gli altri dove sono, il modo diretto è align-self: center su quell'elemento.
Come funziona align-items in Flexbox?
align-items controlla l'allineamento sull'asse trasversale. In un layout row è l'asse verticale, in un layout column è quello orizzontale.
Il valore di default è stretch, e spiega una cosa che molti notano senza capirne la ragione: due elementi affiancati in un flex container appaiono della stessa altezza anche se hanno contenuto diverso. È align-items: stretch che li allunga per riempire l'altezza del container.
css
.container {
display: flex;
align-items: stretch; /* default: tutti alla stessa altezza */
}flex-start li allinea in cima all'asse trasversale, flex-end in fondo, center nel mezzo. Il valore baseline è quello meno usato ma a volte prezioso: allinea gli elementi in base alla linea di base del testo al loro interno, utile quando mescoli elementi con font size diverse e vuoi che il testo visivamente stia sulla stessa riga.
css
.toolbar {
display: flex;
align-items: baseline;
/* Il testo di tutti gli elementi si allinea sulla stessa linea */
}Quando hai più righe di elementi (perché hai impostato flex-wrap: wrap), entra in gioco anche align-content. Mentre align-items agisce sui singoli elementi all'interno di ogni riga, align-content distribuisce lo spazio tra le righe stesse. Accetta gli stessi valori di justify-content.
Perché i miei elementi Flexbox non vanno a capo? (flex-wrap spiegato)
Il valore di default di flex-wrap è nowrap. Questo significa che Flexbox, per sua natura, tiene tutti gli elementi su una riga unica comprimendoli se necessario. Non è un errore: in molti casi, su una navbar o una toolbar, è esattamente il comportamento che vuoi. Ma su una griglia di card rompe tutto.
Per permettere agli elementi di andare a capo:
css
.container {
display: flex;
flex-wrap: wrap;
}Con wrap, un elemento che non ci sta sulla riga corrente scende a quella successiva. Con wrap-reverse sale invece di scendere, partendo dal basso verso l'alto. Usato raramente, ma esiste.
css
.container {
display: flex;
flex-flow: row wrap; /* shorthand per flex-direction + flex-wrap insieme */
}Un problema correlato che capita spesso: hai messo flex-wrap: wrap ma gli elementi non vanno a capo nel punto che ti aspetti. La causa quasi sempre è flex-grow: 1 senza un flex-basis esplicito. Con flex-grow: 1 gli elementi crescono per riempire la riga prima di decidere di andare a capo. La soluzione è dare una dimensione base esplicita:
css
.card {
flex: 1 1 300px;
/* Parte da 300px, cresce se c'è spazio, va a capo quando non riesce
a stare dentro i 300px sulla riga corrente. */
}Proprietà dei Flex Items: flex-grow, flex-shrink, flex-basis e la shorthand flex
Fin qui le proprietà del container. Vediamo quelle che si applicano ai singoli figli.
flex-basis definisce la dimensione iniziale dell'elemento prima che lo spazio venga distribuito. Non è esattamente width: è il punto di partenza del calcolo flessibile. Con auto l'elemento usa la sua dimensione naturale. Con 0 parte da zero e si allarga solo grazie a flex-grow.
css
.box {
flex-basis: 200px; /* parte da 200px, poi Flexbox redistribuisce */
}flex-grow stabilisce quanta parte dello spazio extra l'elemento può occupare. È un numero proporzionale: se tutti i figli hanno flex-grow: 1 lo spazio si divide equamente, se uno ha flex-grow: 2 e gli altri 1 quell'elemento prende il doppio della quota.
css
.box { flex-grow: 1; }
.box-grande { flex-grow: 2; /* prende il doppio dello spazio extra */ }flex-shrink fa il contrario: stabilisce di quanto un elemento si riduce quando lo spazio non basta. Il default è 1, quindi tutti si riducono proporzionalmente. Con 0 l'elemento non si riduce mai sotto il suo flex-basis, anche a costo di causare overflow.
css
.logo {
flex-shrink: 0; /* il logo mantiene sempre la sua dimensione */
}La shorthand flex combina i tre in ordine grow, shrink, basis. Nella pratica la vedrai quasi sempre scritta in due modi:
css
.box {
flex: 1;
/* flex-grow: 1, flex-shrink: 1, flex-basis: 0%
Occupa tutto lo spazio disponibile */
}
.sidebar {
flex: 0 0 250px;
/* Non cresce, non si riduce, sempre 250px */
}
.contenuto {
flex: 1;
/* Prende tutto lo spazio che la sidebar lascia libero */
}Trascina gli slider per vedere come flex-grow distribuisce lo spazio tra gli elementi:
A cosa serve flex: 1 in CSS?
flex: 1 è la shorthand per flex-grow: 1; flex-shrink: 1; flex-basis: 0%. L'elemento parte da dimensione zero, cresce per occupare tutto lo spazio disponibile nel container e si riduce se necessario.
Il dettaglio che vale capire è flex-basis: 0%. Non è la stessa cosa di impostare solo flex-grow: 1 lasciando flex-basis: auto. Con auto l'elemento cresce a partire dalla sua dimensione naturale, quindi elementi con contenuto più lungo partono già più larghi e prendono più spazio. Con 0% tutti partono da zero e lo spazio viene diviso solo in base a flex-grow, senza che il contenuto influenzi il risultato.
css
/* Tre colonne di larghezza identica, indipendentemente dal contenuto */
.colonna-a, .colonna-b, .colonna-c {
flex: 1;
}
/* Proporzione 1:2 tra due elementi */
.item-piccolo { flex: 1; }
.item-grande { flex: 2; }Il caso d'uso più comune è il layout sidebar più contenuto: la sidebar ha flex: 0 0 250px (larghezza fissa, non cresce, non si riduce) e il contenuto ha flex: 1 (prende tutto il resto). La viewport cambia, il contenuto si adatta da solo senza una riga di media query.
Come allineare elementi verticalmente con Flexbox?
L'allineamento verticale dipende da quello che vuoi ottenere. Ci sono almeno tre situazioni distinte e ognuna ha la sua soluzione.
Per centrare verticalmente tutti gli elementi nel container serve che il container abbia un'altezza definita, altrimenti non c'è spazio verticale in cui centrare. Poi align-items: center fa il resto:
css
.container {
display: flex;
align-items: center;
height: 300px;
}Per centrare rispetto all'intera finestra del browser:
css
.container {
display: flex;
align-items: center;
min-height: 100vh;
}Per allineare un singolo elemento in modo diverso dagli altri senza spostare i suoi vicini, la proprietà giusta è align-self:
css
.container {
display: flex;
align-items: flex-start; /* tutti in alto */
}
.elemento-centrato { align-self: center; }
.elemento-in-basso { align-self: flex-end; }C'è un quarto caso che sorprende chi non l'ha incontrato: stai lavorando con flex-direction: column e vuoi centrare gli elementi in orizzontale. La proprietà da usare rimane align-items, perché in column l'asse trasversale è orizzontale. La proprietà non cambia, è l'asse su cui agisce che si è spostato.
css
.container-verticale {
display: flex;
flex-direction: column;
align-items: center; /* centra in orizzontale, perché l'asse trasversale è orizzontale */
}Esempi Pratici di Layout Responsive
Basta teoria. Vediamo i pattern che escono fuori in ogni progetto.
Navbar con logo a sinistra e link a destra
html
<nav class="navbar">
<div class="logo">MioBrand</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>css
.navbar {
display: flex;
justify-content: space-between; /* logo a sinistra, link a destra */
align-items: center; /* tutto centrato verticalmente */
padding: 1rem 2rem;
}
.nav-links {
display: flex; /* anche la lista diventa un flex container */
gap: 20px;
list-style: none;
}Un'alternativa utile: se hai un solo elemento che deve stare tutto a destra separato dagli altri, margin-left: auto su quell'elemento è più pulito di usare space-between sull'intero container. margin: auto in un contesto Flex assorbe tutto lo spazio disponibile in quella direzione.
Card grid responsive senza media query
css
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
/* Ogni card parte da 300px, cresce per riempire lo spazio,
va a capo quando non riesce a starci.
Su schermi larghi vengono 3-4 card per riga,
su tablet 2, su mobile 1. Zero media query. */
}Footer a colonne con stack su mobile
css
.footer {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: space-between;
}
.footer-colonna {
flex: 1 1 200px;
/* Su mobile le colonne si impilano verticalmente.
Su desktop stanno affiancate. Stesso markup, stesso CSS. */
}Debugging Flexbox: Strumenti e Errori Comuni
Usare i DevTools del browser
Prima di aggiungere e togliere proprietà a caso, apri i DevTools. I browser moderni hanno strumenti dedicati a Flexbox.
In Chrome DevTools: clic destro, Ispeziona, nel pannello Elements cerca il badge flex accanto al container. Cliccandoci attivi un overlay che mostra assi, allineamento e distribuzione dello spazio. Nel pannello Layout c'è anche un'opzione per evidenziare tutti i container Flex della pagina in una volta.
In Firefox DevTools: la sezione Flexbox nel pannello Layout è ancora più dettagliata. Mostra in tempo reale come viene distribuito lo spazio tra gli elementi con valori numerici per flex-grow e flex-shrink. Se lavori spesso con Flexbox vale la pena tenerlo aperto.
Errori comuni
min-width: 0 dimenticato. Flexbox rispetta la dimensione minima del contenuto degli elementi. Un figlio con testo lungo o un'immagine può non ridursi come ti aspetti perché il browser gli calcola una dimensione minima implicita. La soluzione:
css
.box-con-testo-lungo {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Assi confusi dopo flex-direction: column. Quando cambi direzione, justify-content e align-items si scambiano i ruoli. Non è un bug, ma è la causa del 30% degli errori di allineamento che vedo nel codice altrui.
height: 100% invece di flex: 1. Se vuoi che un elemento riempia lo spazio verticale rimanente in un contesto Flex, height: 100% spesso non funziona come ti aspetti. La soluzione giusta è flex: 1 sul figlio.
Testare solo con box vuoti. Un layout che funziona con placeholder si rompe con testo reale, immagini di dimensioni diverse, contenuto dinamico. Testa sempre con dati reali prima di considerarlo finito.
Qual è la differenza tra Flexbox e CSS Grid? (e quando usare l'uno o l'altro)
Non sono in competizione. Risolvono problemi diversi, ed è abbastanza comune usarli entrambi nello stesso progetto.
Flexbox è nato per i layout monodimensionali, ovvero quando lavori su una riga o una colonna alla volta. Il suo punto di forza è distribuire spazio e allineare elementi in una direzione, lasciando che l'altra si adatti al contenuto. Navbar, toolbar, card in fila, footer, allineamento di elementi dentro un componente: questi sono i casi naturali di Flexbox.
CSS Grid è nato per i layout bidimensionali, quando hai bisogno di controllare righe e colonne contemporaneamente. Layout di pagina, dashboard, gallerie con posizionamento preciso su entrambi gli assi: questi sono i casi naturali di Grid.
Una regola pratica: se il layout si sviluppa in una sola direzione e gli elementi devono adattarsi allo spazio disponibile, Flexbox è la scelta giusta. Se hai bisogno che gli elementi si allineino su due assi contemporaneamente, Grid fa il lavoro meglio.
css
/* Grid gestisce la struttura della pagina */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
}
/* Flexbox gestisce l'allineamento dentro ogni sezione */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}Una cosa che fa confusione: il pattern flex: 1 1 300px sulle card sembra bidimensionale, perché le card vanno a capo e si dispongono su più righe. In realtà Flexbox non controlla quelle righe: le card ci vanno da sole in base allo spazio disponibile. Non puoi allineare elementi di righe diverse tra loro. Per quello serve Grid con grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)).
Per approfondire Grid: Cos'è il CSS Grid e come funziona. Per il layout responsive in generale: come creare layout responsive.
Ha senso imparare float e position nel 2026 se c'è Flexbox?
Sì, e non solo per il codice legacy.
float e position hanno casi d'uso che Flexbox non copre e probabilmente non coprirà mai, perché non è il suo scopo. float serve ancora per avvolgere il testo attorno a un'immagine: è il suo scopo originale, e lo fa bene. position: absolute e position: fixed servono per elementi che devono uscire dal flusso del documento: dropdown, tooltip, modal overlay, header fisso allo scroll. Flexbox lavora dentro il flusso normale, non lo sostituisce.
Quello che non ha più senso è usare float per costruire layout di colonne. Lo si faceva per necessità, non perché fosse la soluzione giusta. Quella responsabilità è passata a Flexbox e Grid. Ma dimenticarsi del tutto di float significa trovarsi bloccato su codice legacy o non capire perché un testo si comporta in modo strano accanto a un'immagine.
In breve: Flexbox e Grid per i layout, position per uscire dal flusso, float per il wrapping del testo e per leggere il codice altrui senza farsi prendere dal panico.
Dove Continuare
Flexbox Froggy è il modo più rapido per consolidare la teoria: scrivi CSS reale per spostare rane su foglie di ninfea. Suona ridicolo, ma funziona bene per memorizzare il modello degli assi.
Per i pattern avanzati, come Holy Grail layout, sticky footer e layout responsive con breakpoint multipli, consulta la guida su come creare layout responsive.
Riepilogo
display: flex sul container attiva il contesto Flex e trasforma i figli diretti in flex items. display: inline-flex fa lo stesso, ma il container rimane inline, utile per componenti piccoli dentro il testo.
flex-direction decide l'asse principale: row per orizzontale, column per verticale. justify-content distribuisce lo spazio sull'asse principale. align-items allinea sull'asse trasversale. Quando cambi flex-direction, i due assi si scambiano: le proprietà rimangono le stesse, cambiano gli assi su cui agiscono.
flex-wrap: wrap permette agli elementi di andare a capo quando lo spazio finisce. Senza, Flexbox li comprime tutti su una riga.
flex-grow, flex-shrink e flex-basis, oppure la shorthand flex, controllano il comportamento dimensionale di ogni singolo item. flex: 1 è la dichiarazione più comune: l'elemento occupa tutto lo spazio disponibile.
align-self permette a un singolo elemento di sovrascrivere l'allineamento trasversale del container. order cambia l'ordine visivo senza toccare l'HTML.
gap gestisce la spaziatura tra gli elementi senza margini extra sui bordi.
Quiz Flexbox
- Quale proprietà definisce l'allineamento lungo l'Asse Principale?
Risposta:justify-content - Come faccio andare i box a capo quando finisce lo spazio?
Risposta:flex-wrap: wrap - Codice per centrare perfettamente un elemento?
Risposta:display: flex+justify-content: center+align-items: center - Sidebar larghezza fissa, contenuto flessibile?
Risposta:flex: 0 0 250pxsulla sidebar,flex: 1sul contenuto - Cosa fa esattamente
flex: 1?
Risposta:flex-grow: 1; flex-shrink: 1; flex-basis: 0%, ovvero l'elemento occupa tutto lo spazio disponibile partendo da dimensione zero - Differenza tra
display: flexedisplay: inline-flex?
Risposta: il comportamento dei figli è identico; cambia come il container si relaziona agli elementi circostanti (blocco vs inline) - Perché i miei elementi non vanno a capo?
Risposta: il default èflex-wrap: nowrap; aggiungiflex-wrap: wrap
FAQ su Flexbox
Flexbox è supportato da tutti i browser?
Dal 2020, sì. Chrome, Firefox, Safari, Edge, browser mobile: supporto completo senza prefissi vendor.
Come centro un div verticalmente e orizzontalmente?
Sul container: display: flex, justify-content: center, align-items: center. Aggiungi min-height: 100vh per centrare rispetto all'intera viewport.
Qual è la differenza tra justify-content e align-items?
justify-content lavora sull'asse principale (orizzontale con row, verticale con column). align-items lavora sull'asse trasversale, sempre perpendicolare al principale.
Posso cambiare l'ordine degli elementi senza modificare l'HTML?
Sì, con la proprietà order. Cambia solo l'ordine visivo: screen reader e navigazione da tastiera seguono ancora l'ordine del DOM. Usalo con cautela per non creare problemi di accessibilità.
Flexbox è meglio di CSS Grid?
Sono strumenti per problemi diversi. Flexbox per layout monodimensionali, Grid per layout bidimensionali. Nella pratica si usano entrambi nello stesso progetto.
Cosa fa flex: 1?
Shorthand per flex-grow: 1; flex-shrink: 1; flex-basis: 0%. L'elemento cresce per occupare tutto lo spazio disponibile nel container, partendo da dimensione zero.
Qual è la differenza tra align-items e align-content?
align-items allinea gli elementi sull'asse trasversale all'interno di ogni riga. align-content distribuisce lo spazio tra le righe stesse: ha effetto solo quando ci sono più righe, quindi solo con flex-wrap: wrap.
Devo ancora imparare i float con Flexbox?
Sì, per due ragioni: i float servono ancora per avvolgere testo attorno alle immagini, e troverai codice legacy che li usa per i layout. Non sostituire tutto con Flexbox solo perché puoi.
Articolo parte del cluster HTML & CSS di fabiogulotta.it. Articoli correlati: Tag Semantici HTML5 · HTML vs HTML5 · CSS Grid · Layout Responsive · Best Practices HTML & CSS
