Display: basi di block, inline, flex e grid

La proprietà display è la proprietà CSS più importante per il layout. Controlla il modo in cui un elemento partecipa al flusso del layout e il modo in cui vengono disposti i suoi figli. I valori più utilizzati sono: block, inline, inline-block, flex, grid e none.

Gli elementi block occupano la larghezza completa del contenitore e iniziano su una nuova riga. Esempi: <div>, <p>, <h1>. Sugli elementi block è possibile impostare larghezza, altezza, margine e padding.

Gli elementi inline fluiscono all'interno del testo e non iniziano su una nuova riga. Esempi: <span>, <a>, <strong>. Larghezza, altezza e margini verticali non hanno effetto sugli elementi inline.

inline-block combina entrambi i comportamenti: l'elemento fluisce in linea, come il testo, ma accetta larghezza, altezza e margini verticali, come un elemento block. È utile per pulsanti e badge che devono disporsi sulla stessa riga del testo.

display: none rimuove completamente l'elemento dal layout: non occupa spazio. Utilizzi visibility: hidden per nasconderlo mantenendo lo spazio che occupava.

display: flex trasforma un elemento in un contenitore flex. I suoi figli diretti diventano elementi flex che si dispongono lungo una riga (impostazione predefinita) o una colonna. Flexbox è ideale per distribuire lo spazio e allineare gli elementi.

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: spazio tra gli elementi senza usare margin.

display: grid trasforma un elemento in un contenitore grid. Definisca righe e colonne con grid-template-columns e grid-template-rows. Grid è ideale per i layout di pagina e le griglie di schede.

L'unità fr (frazione) distribuisce lo spazio disponibile. grid-template-columns: 1fr 2fr 1fr crea tre colonne, di cui quella centrale riceve il doppio dello spazio rispetto alle altre.

Utilizzi Flexbox per i layout a una dimensione (una riga di pulsanti, una pila di schede). Utilizzi Grid per i layout a due dimensioni (la struttura di una pagina, una galleria fotografica con righe e colonne esplicite). Entrambi possono coesistere nella stessa pagina.

display: none: rimuove l'elemento dal layout, rendendolo non accessibile ai lettori di schermo. visibility: hidden: rende l'elemento invisibile, ma questo continua a occupare spazio e a essere presente nell'albero dell'accessibilità. opacity: 0: rende l'elemento invisibile, ma questo continua a occupare spazio ed è accessibile.

block occupa l'intera larghezza. inline fluisce con il testo. inline-block combina entrambi i comportamenti. flex dispone i figli in una dimensione. grid dispone i figli in due dimensioni. none rimuove l'elemento dal layout. Padroneggi questi valori e controllerà ogni layout sul web.