Flexbox di base

Contenitore flex

Flexbox è un modello di layout CSS per distribuire spazio e allineare elementi lungo un asse principale. È ideale per barre strumenti, righe di card, form inline e centratura verticale senza hack con position o float. Attivi flex sul contenitore (display: flex); i figli diretti diventano flex item con regole di allineamento e crescita configurabili.

Proprietà utili

Sul contenitore le più usate sono flex-direction (riga o colonna), justify-content (distribuzione sull’asse principale), align-items (allineamento sull’asse trasversale) e gap per spaziatura uniforme tra item. flex-wrap: wrap permette di andare a capo su schermi stretti invece di schiacciare i pulsanti.

Evita margini negativi a cascata per «annullare» spazi: gap è più prevedibile e funziona bene con design system basati su token.

Barra azioni

Un pattern tipico: titolo a sinistra, pulsanti a destra, wrap su mobile.

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.toolbar__actions {
  display: flex;
  gap: 0.5rem;
}

Comportamento dei figli

Sui figli puoi usare flex: 1 per far crescere un elemento e riempire lo spazio libero, oppure flex-shrink: 0 su icone che non devono schiacciarsi. margin-left: auto su un solo figlio lo spinge a destra in una riga flex, utile per menu secondari.

Flexbox non sostituisce sempre CSS Grid: griglie bidimensionali complesse restano più chiare con display: grid. Usa flex per componenti lineari (header, footer bar, chip list).

Allineamenti avanzati

Con align-self su singoli figli puoi allineare un badge in alto in una card flex row mentre il testo resta centrato. justify-content: space-between su nav con due elementi li spinge agli estremi; con tre gruppi usa wrapper flex annidati. Per equal-height card in riga, flex default align-items: stretch aiuta; controlla che padding interno non crei altezze disallineate visivamente.

Quando flex non basta (griglia 12 colonne, aree nominate), passa a grid per quella sezione senza mescolare modelli in conflitto sullo stesso contenitore.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Flexbox di base con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Applicare flex a troppi wrapper annidati senza bisogno.
• Dimenticare flex-wrap e ottenere pulsanti tagliati su mobile.
• Usare flex per layout a colonne editoriali intere invece di grid o flow normale.
• Allineare con margini fissi in pixel invece di gap e token.
• Non testare ordine visivo vs ordine DOM per utenti tastiera.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

In breve

• display: flex sul contenitore, regole su assi e gap.
• Toolbar e righe di controlli sono casi d’uso ideali.
• Wrap e min-width: 0 per testo lungo.
• Grid per layout 2D, flex per righe/colonne componenti.