Cheat Sheet pentru layout CSS Flexbox

Modelul de layout Flexbox (Flexible Box) oferă un mod mai eficient de a alinia și distribui elementele în interiorul unui container, chiar și atunci când dimensiunea lor este necunoscută sau dinamică.

Container Flex

Set on parent: display: flex; or display: inline-flex;

Proprietate	Descriere	Valori comune
`flex-direction`	Direcția axei principale	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Dacă se trece la rând nou	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Scurtătură pentru direcție și wrap	`row wrap`
`justify-content`	Alinierea pe axa principală	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Alinierea pe axa secundară	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Alinierea mai multor rânduri pe axa secundară	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Elemente Flex

Set on children:

Proprietate	Descriere	Implicit
`order`	Ordinea de afișare (valorile mai mici apar primele)	`0`
`flex-grow`	Proporția de mărire (când există spațiu)	`0`
`flex-shrink`	Proporția de micșorare (când spațiul e insuficient)	`1`
`flex-basis`	Dimensiunea de bază înainte de distribuirea spațiului	`auto`
`flex`	Scurtătură pentru grow, shrink și basis	`0 1 auto`
`align-self`	Permite unei singure piese să aibă o aliniere diferită	`auto`

Concepte fundamentale

Axa Principală (Main Axis): Orizontală implicit, definită de flex-direction.
Axa Secundară (Cross Axis): Direcția perpendiculară pe axa principală.

Exemple de scenarii

Centrare pe orizontală și verticală

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Distribuire pe lățime egală

.item {
  flex: 1; /* Ocupă uniform spațiul rămas */
}

Aliniere la margini

.navbar {
  display: flex;
  justify-content: space-between;
}