align-items în CSS

align-items: stretch;    /* implicit: se întind la aceeași înălțime */
align-items: center;     /* centrare verticală */
align-items: flex-start; /* aliniere la marginea de sus */
align-items: flex-end;   /* aliniere la marginea de jos */
align-items: baseline;   /* aliniere după linia de bază a textului */

Ce face align-items

align-items controlează poziționarea pe verticală a elementelor flex.

Valoarea implicită stretch face ca toate elementele dintr-un rând să aibă automat exact aceeași înălțime, egală cu a celui mai înalt dintre ele (rezolvând o mare problemă a cardurilor de produse).

Valoarea center este standardul pentru alinierea verticală a unei iconițe lângă un text sau a unui logo lângă meniu.

Valori uzuale

Valoare	Descriere
stretch	Implicit: elementele se întind pentru a umple toată înălțimea containerului.
center	Elementele sunt centrate vertical pe axa secundară.
flex-start	Aliniate la marginea de sus.
flex-end	Aliniate la marginea de jos.
baseline	Aliniază textele din elemente pe aceeași linie de scriere, indiferent de mărimea fonturilor.

Exemple

Exemplul 1: Alinierea verticală a unei iconițe lângă un text

center elimină alinierea stângace unde iconița stătea prea sus.

.element-meniu {
  display: flex;
  align-items: center;
  gap: 8px;
}

Efect vizual în browser

Iconița grafică și textul de lângă ea stau perfect echilibrate pe aceeași axă orizontală de mijloc.

Greșeli frecvente

• Încercarea de a folosi vertical-align pe elemente flex; vertical-align funcționează doar pe tabele sau inline, în timp ce în flexbox se folosește exclusiv align-items.

Comenzi înrudite

• justify-content: Distribuie elementele și spațiul liber de-a lungul axei principale (orizontal când flex-direction este row).
• display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
• align-self: Suprascrie alinierea verticală (align-items) a containerului pentru un singur element copil individual.