display: flex e il concetto di flex container vs flex items

Flexbox parte da una distinzione semplice ma fondamentale: il contenitore decide il comportamento, gli elementi figli vengono disposti secondo quelle regole.

Quando scrivi display: flex, non stai applicando una proprietà ai singoli elementi da allineare. Stai trasformando il loro genitore in un flex container.

<nav class="menu">
  <a href="/">Home</a>
  <a href="/progetti">Progetti</a>
  <a href="/contatti">Contatti</a>
</nav>

.menu {
  display: flex;
}

In questo esempio .menu è il flex container. I tre link sono i flex items. Appena il contenitore diventa flex, i figli diretti smettono di seguire il normale flusso verticale dei blocchi e vengono disposti lungo un asse principale.

Container e items

Le proprietà di Flexbox si dividono in due gruppi.

Le proprietà del contenitore controllano il gruppo:

• flex-direction: decide se i figli si dispongono in riga o in colonna.
• justify-content: distribuisce lo spazio lungo l’asse principale.
• align-items: allinea i figli sull’asse trasversale.
• flex-wrap: permette o impedisce l’andata a capo.
• gap: definisce lo spazio tra gli elementi.

Le proprietà dei singoli item controllano eccezioni locali:

• flex-grow: quanto un item può crescere.
• flex-shrink: quanto un item può restringersi.
• flex-basis: qual è la sua dimensione di partenza.
• align-self: come un singolo item si allinea diversamente dagli altri.
• order: come cambia il suo ordine visivo.

Questa separazione evita molta confusione. Se vuoi cambiare il comportamento dell’intera riga, lavori sul contenitore. Se vuoi cambiare il comportamento di un solo elemento, lavori sull’item.

Cosa succede con display: flex

Di default, un flex container usa:

.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

Questo significa:

1. gli elementi vengono messi in riga;
2. partono dall’inizio del contenitore;
3. provano a stare tutti sulla stessa riga;
4. si allungano sull’asse trasversale se il contenitore ha altezza disponibile.

Per una barra di navigazione, questo comportamento di base è già utile:

.menu {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Solo i figli diretti diventano flex items

Flexbox agisce sui figli diretti del contenitore, non su tutti i discendenti.

<div class="card-list">
  <article class="card">
    <h2>Titolo</h2>
    <p>Testo della card.</p>
  </article>
  <article class="card">...</article>
</div>

.card-list {
  display: flex;
  gap: 1rem;
}

In questo caso le due .card sono flex items. Il titolo e il paragrafo dentro la card non vengono disposti da .card-list; restano nel normale flusso della card, a meno che anche .card diventi a sua volta un flex container.

Esercizio

Crea una lista di tre link dentro un elemento <nav>, poi applica:

nav {
  display: flex;
  gap: 1rem;
}

Apri i DevTools e controlla che il browser evidenzi il contenitore flex. Prima di passare avanti, devi saper indicare a voce quale elemento è il container e quali elementi sono gli items.