Layout con Flexbox

Bentornato.

Nella lezione precedente hai imparato il box model.

Content.

Padding.

Border.

Margin.

La grande famiglia delle scatole.

Ora impariamo a posizionare quelle scatole bene nella pagina.

Qui entra Flexbox.

Flexbox è uno degli strumenti di layout più utili in CSS.

Ti aiuta ad allineare elementi in righe o colonne.

Ti aiuta a centrare cose.

Ti aiuta a creare navbar, card, pulsanti, sezioni e layout senza perdere completamente la testa.

Solo parzialmente.

Questo è ancora CSS.

Cosa Imparerai

In questa lezione imparerai:

cos’è Flexbox;
cos’è un flex container;
cosa sono i flex items;
come usare display: flex;
come usare flex-direction;
come usare justify-content;
come usare align-items;
come usare gap;
come creare semplici layout di card;
come centrare contenuti con Flexbox.

Cos’è Flexbox?

Flexbox significa Flexible Box Layout.

È un sistema di layout CSS progettato per organizzare elementi in una direzione.

Quella direzione può essere:

row;
column.

Una row va da sinistra a destra.

Una column va dall’alto verso il basso.

Flexbox è perfetto quando vuoi allineare elementi in modo ordinato.

Per esempio:

link di navigazione;
card in una riga;
pulsanti;
sezioni profilo;
hero layouts;
contenuto centrato.

Prima di Flexbox, centrare cose in CSS sembrava provare a convincere un gatto a seguire istruzioni.

Possibile?

Forse.

Piacevole?

No.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson5
cd css-lesson5
touch index.html
touch style.css

Dovresti avere:

css-lesson5/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una piccola landing page con navigazione e card.

È un buon esercizio per Flexbox.

Semplice.

Pratico.

Non un labirinto CSS misterioso.

Almeno non oggi.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout con Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">FlexSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Corsi</a>
        <a href="#">Progetti</a>
        <a href="#">Contatto</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Impara Flexbox Senza Panico</h2>
        <p>Flexbox ti aiuta ad allineare e organizzare elementi con meno caos e meno sospiri drammatici.</p>
        <a href="#" class="button">Inizia a Imparare</a>
      </div>

      <div class="hero-box">
        <p>display: flex;</p>
      </div>
    </section>
  </header>

  <main class="page">
    <section class="cards">
      <article class="card">
        <h2>Allinea</h2>
        <p>Posiziona gli elementi esattamente dove vuoi.</p>
      </article>

      <article class="card">
        <h2>Distribuisci</h2>
        <p>Controlla lo spazio tra gli elementi.</p>
      </article>

      <article class="card">
        <h2>Organizza</h2>
        <p>Crea righe e colonne pulite.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo CSS Flexbox.</p>
  </footer>
</body>
</html>

Questa pagina ha:

una navigation bar;
logo;
link;
hero section;
blocco testo;
box visuale;
card;
footer.

Perfetta per praticare Flexbox.

Ora dobbiamo far comportare il layout.

Educatamente, se possibile.

Inizia con gli Stili Base

Apri style.css e aggiungi:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Questo ci dà:

dimensioni prevedibili;
nessun margin predefinito del body;
font semplice;
link puliti.

Buona base.

Una cattiva base rende il layout doloroso.

Come costruire un sito su spaghetti bagnati.

Crea un Flex Container

Per usare Flexbox, aggiungi:

display: flex;

a un container.

Esempio:

.navbar {
  display: flex;
}

Il container diventa un flex container.

I figli diretti dentro diventano flex items.

In questo caso:

<nav class="navbar">
  <h1 class="logo">FlexSite</h1>
  <div class="nav-links">...</div>
</nav>

.navbar è il flex container.

.logo e .nav-links sono flex items.

Aggiungi questo:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

Ora logo e link stanno sulla stessa riga.

Il logo va a sinistra.

I link vanno a destra.

Flexbox sta già facendo un lavoro utile.

Sospettosamente utile.

Ma accettiamo.

Flex Direction

La proprietà flex-direction controlla la direzione principale.

Valore predefinito:

flex-direction: row;

Questo significa che gli elementi vanno da sinistra a destra.

Puoi anche usare:

flex-direction: column;

Questo significa che gli elementi vanno dall’alto verso il basso.

Esempio:

.hero {
  display: flex;
  flex-direction: row;
}

Questo posiziona i figli della hero uno accanto all’altro.

Aggiungi questo:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

Ora il testo hero e la hero box stanno uno accanto all’altro.

Molto meglio di due blocchi tristi impilati senza piano.

justify-content

justify-content controlla l’allineamento sull’asse principale.

Se flex-direction è row, l’asse principale è orizzontale.

Valori comuni:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Nella navbar abbiamo usato:

justify-content: space-between;

Questo spinge gli elementi lontano tra loro.

Logo a sinistra.

Link a destra.

Come una buona navigation bar che conosce il suo lavoro.

Nella hero abbiamo usato anche:

justify-content: space-between;

Questo crea spazio tra testo e box.

Flexbox sta praticamente organizzando i mobili.

Finalmente qualcuno in CSS si comporta da adulto.

align-items

align-items controlla l’allineamento sull’asse secondario.

Se flex-direction è row, l’asse secondario è verticale.

Valori comuni:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;

Abbiamo usato:

align-items: center;

Questo centra gli elementi verticalmente.

Molto utile.

Molto comune.

Molto soddisfacente.

Centrare cose un tempo era una storia horror di CSS.

Flexbox l’ha resa molto meno drammatica.

Non completamente senza drammi.

Ma meno drammatica.

gap

La proprietà gap crea spazio tra flex items.

Esempio:

.nav-links {
  display: flex;
  gap: 20px;
}

Aggiungi questo:

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Ora i link di navigazione hanno spazio pulito.

Non serve aggiungere margin a ogni link.

Niente piccole battaglie di spacing.

Niente problema “perché l’ultimo elemento è strano?”.

gap è bellissimo.

CSS a volte ci fa regali.

Rari, ma reali.

Stilizza Header e Hero

Aggiungi questi stili:

.site-header {
  background-color: #111827;
  color: white;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Ora la hero sembra più una vera sezione.

Il pulsante è arrotondato.

Il testo è leggibile.

Il layout è strutturato.

Nessuno sta piangendo.

Ottimo progresso.

Centrare con Flexbox

Flexbox è famoso per centrare.

Per centrare qualcosa orizzontalmente e verticalmente:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Aggiungi questo:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

Ora il testo dentro .hero-box è perfettamente centrato.

Questo è uno dei pattern Flexbox più utili.

Un piccolo miracolo.

Nessun rituale antico richiesto.

Nessuna candela CSS.

Nessuna tastiera sacrificata.

Card con Flexbox

Ora stilizziamo la sezione delle card.

Aggiungi:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Parte importante:

.card {
  flex: 1;
}

Questo dice a ogni card di prendere lo stesso spazio disponibile.

Tre card.

Stessa larghezza.

Layout pulito.

Nessun calcolo manuale.

CSS fa la matematica.

Cerca di non sembrare troppo sorpreso.

La Proprietà flex

La proprietà flex controlla come i flex items crescono o si riducono.

Questo:

flex: 1;

significa:

Lascia che questo elemento cresca e condivida lo spazio disponibile in modo uguale.

Se tutte le card hanno flex: 1, diventano della stessa larghezza.

Esempio:

.card {
  flex: 1;
}

È molto utile per card, colonne e sezioni.

Ma non usare flex: 1 ovunque senza pensare.

Gli strumenti CSS sono potenti.

Un martello è utile.

Ma non ti lavi i denti con quello.

Footer

Aggiungi:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Footer semplice.

Senza drammi.

A volte è il miglior tipo di footer.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Salva.

Aggiorna.

La pagina dovrebbe ora avere:

navigazione con logo e link;
testo hero e box uno accanto all’altro;
contenuto centrato dentro la hero box;
tre card uguali;
spaziatura pulita.

Questo è Flexbox che fa il suo lavoro.

Potente in silenzio.

Come uno sviluppatore che ha sistemato production e non si è vantato.

Creatura rara.

Errori Comuni

Aggiungere display flex all’elemento sbagliato

Flexbox lavora sui figli diretti.

Se scrivi:

.card {
  display: flex;
}

questo influenza i figli dentro .card.

Non organizza le card tra loro.

Per organizzare le card, aggiungi Flexbox al loro parent:

.cards {
  display: flex;
}

Il parent controlla i figli.

Questa frase spiega metà Flexbox.

E forse un po’ di psicologia familiare.

Dimenticare gap

Senza gap, gli elementi possono toccarsi.

Male:

.cards {
  display: flex;
}

Meglio:

.cards {
  display: flex;
  gap: 24px;
}

La spaziatura conta.

Senza spazio, il layout sembra affollato.

Come se tutti fossero arrivati alla stessa festa e fossero rimasti in cucina.

Usare Flexbox per tutto

Flexbox è ottimo per layout a una dimensione.

Righe o colonne.

Ma per layout completi a due dimensioni, CSS Grid spesso è meglio.

Flexbox non è sbagliato.

Semplicemente non è la risposta a ogni domanda.

Non usare un cacciavite per mangiare la zuppa.

Pratica

Crea una pagina con:

una navbar;
un logo;
quattro link di navigazione;
una hero section;
due colonne hero;
tre card;
un footer.

Usa Flexbox per:

allineamento navbar;
link di navigazione;
layout hero;
riga delle card;
centrare una box.

Usa queste proprietà:

display: flex;
flex-direction;
justify-content;
align-items;
gap;
flex: 1.

Cambia i valori e osserva cosa succede.

CSS diventa comprensibile quando sperimenti.

Non quando lo fissi come se ti dovesse dei soldi.

Mini Sfida

Crea una sezione pricing con tre piani:

Basic;
Standard;
Premium.

Ogni piano deve essere una card.

Usa Flexbox così le card stanno in una riga.

Dai a ogni card la stessa larghezza con:

flex: 1;

Fai risaltare la card Premium.

Aggiungi un pulsante dentro ogni card.

Poi centra l’area del pulsante usando Flexbox.

Questo è Flexbox reale.

Card.

Pulsanti.

Spaziatura.

Allineamento.

Il pane quotidiano del frontend development.

A volte croccante.

Ma utile.

Riassunto

Oggi hai imparato che:

Flexbox si usa per layout a una dimensione;
display: flex crea un flex container;
i figli diretti diventano flex items;
flex-direction controlla direzione row o column;
justify-content controlla l’allineamento sull’asse principale;
align-items controlla l’allineamento sull’asse secondario;
gap crea spazio tra flex items;
flex: 1 permette agli elementi di condividere lo spazio disponibile;
Flexbox è ottimo per navbar, card, pulsanti e centering.

Flexbox è uno degli strumenti CSS più importanti.

Imparalo bene.

Usalo spesso.

Ma non usarlo per tutto.

Anche la pizza non va mangiata con un martello.

Prossima Lezione

Nella prossima lezione impareremo CSS Grid.

Flexbox è ottimo per una direzione.

Grid è potente per righe e colonne insieme.

Il regno dei layout si espande.