`align-content` în CSS

Flexbox (Layout flexibil) CSS3+ (în containere block: Chrome 123, Firefox 125, Safari 17.4)

Aliniază pe verticală rândurile unui container flex cu wrap sau ale unei grile, ori tot conținutul unui bloc.

Sintaxă CSS

align-content: center;
align-content: space-between;
align-content: flex-start;
align-content: stretch;   /* implicit în flex (normal) */

/* într-un div obișnuit, fără flex sau grid */
.cutie { display: block; height: 200px; align-content: center; }

Ce face `align-content`

align-content distribuie spațiul liber pe axa transversală între rânduri, nu între elementele unui rând (asta face align-items). Într-un container flex are efect doar dacă există mai multe rânduri, adică doar cu flex-wrap: wrap.

În CSS Grid, mută întreaga grilă în container atunci când rândurile ocupă mai puțin decât înălțimea lui (de exemplu align-content: center pune grila la mijloc pe verticală).

Noutate utilă: în browserele actuale (Chrome 123, Firefox 125, Safari 17.4 și mai noi), align-content funcționează și pe un bloc obișnuit (display: block) cu înălțime dată. Așa poți centra vertical conținutul unei cutii fără Flexbox.

Valori uzuale

Valoare	Descriere
`normal`	Implicit; în flex se comportă ca stretch.
`flex-start / start`	Rândurile se adună la începutul axei (sus).
`center`	Rândurile se adună la mijloc.
`flex-end / end`	Rândurile se adună la final (jos).
`space-between`	Primul rând sus, ultimul jos, spațiu egal între ele.
`space-around / space-evenly`	Spațiu distribuit în jurul / egal între toate rândurile.

Exemple

Exemplul 1: Etichete pe mai multe rânduri, adunate sus

Într-un panou înalt cu etichete, implicit rândurile s-ar întinde pe toată înălțimea; flex-start le ține grupate sus.

.etichete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  height: 240px;
  align-content: flex-start;
}

Efect vizual în browser

Etichetele (Iași, Cluj, Timișoara, Brașov, Constanța, …) ocupă două rânduri strânse în partea de sus a panoului; restul înălțimii rămâne gol, jos.

Exemplul 2: Centrare verticală într-un bloc simplu, fără flex

Merge în browserele din 2024 încoace; în cele vechi textul rămâne sus, deci degradarea este acceptabilă.

.banner {
  height: 180px;
  align-content: center;
  text-align: center;
  background: #1e293b;
  color: #ffffff;
}