Flexbox Playground & Generator

Regula de Aur a Flexbox-ului: Axa Principală vs. Axa Transversală

Modelul Flexible Box (Flexbox) este unidimensional, adică organizează elementele pe o singură direcție la un moment dat (spre deosebire de CSS Grid, care este bidimensional și controlează simultan rânduri și coloane):

• Axa principală (Main Axis): Este definită de flex-direction. Dacă este setată la row, axa principală este orizontală. Dacă este column, axa principală devine verticală. Proprietatea justify-content controlează întotdeauna alinierea de-a lungul axei principale.
• Axa transversală (Cross Axis): Este întotdeauna perpendiculară pe axa principală. Proprietatea align-items controlează alinierea pe această axă secundară.

Proprietățile Copiilor: Trilogia flex-grow, flex-shrink și flex-basis

În timp ce proprietățile din generator controlează containerul părinte, comportamentul fiecărui copil flexibil poate fi personalizat individual prin proprietatea prescurtată flex:

Sintaxă Scurtă	Echivalent Detaliat	Comportament Practic în Layout
flex: 1;	flex: 1 1 0%;	Elementul ocupă spațiu egal cu ceilalți frați, ignorând lățimea conținutului său inițial.
flex: auto;	flex: 1 1 auto;	Elementul se mărește proporțional cu conținutul său, dar împarte spațiul rămas disponibil.
flex: initial;	flex: 0 1 auto;	Valoarea implicită: elementul nu crește dacă există spațiu gol, dar se poate micșora dacă spațiul este insuficient.
flex: none;	flex: 0 0 auto;	Elementul este complet rigid (nu se micșorează și nu crește, păstrându-și dimensiunile exacte).

Secretul Marginii Automate: margin-left: auto

Unul dintre cele mai elegante și puțin înțelese trucuri din CSS Flexbox este utilizarea marginilor automate. Într-o bară de navigație (navbar), dacă aplici margin-left: auto; pe ultimul element, acesta va absorbi tot spațiul rămas și va fi împins instant la marginea din dreapta:

/* Meniu cu logo la stânga și buton de login la dreapta */
.nav-container {
  display: flex;
  align-items: center;
}

.nav-login-btn {
  margin-left: auto; /* Împinge butonul la extremitatea dreaptă fără a folosi float sau absolute */
}

Capcana Clasică Flexbox: Textul Lung care Sparge Layout-ul (min-width: 0)

Ai întâlnit vreodată situația în care un text lung sau un titlu cu text-overflow: ellipsis; refuză să se truncheze și împinge containerul flex din ecran? În mod implicit, elementele flex au min-width: auto;, ceea ce înseamnă că nu se pot micșora sub dimensiunea minimă a conținutului lor:

/* Soluția definitivă pentru trunchierea textului în Flexbox */
.flex-child-cu-text {
  min-width: 0; /* Permite elementului să se micșoreze sub conținutul său */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Întrebări Frecvente (FAQ) despre Flexbox

1. Când ar trebui să folosesc Flexbox și când CSS Grid?

Folosește Flexbox pentru componente unidimensionale (butoane, meniuri, carduri cu elemente în linie, aliniere verticală). Folosește CSS Grid pentru structuri bidimensionale pe linii și coloane (grile de produse, layout de pagină întreagă).

2. Care este diferența dintre justify-content și align-items?

justify-content aliniază elementele pe axa principală (orizontală când flex-direction: row), în timp ce align-items aliniază elementele pe axa transversală perpendiculară (verticală când flex-direction: row).

3. Ce face proprietatea flex-wrap: wrap?

În mod implicit (nowrap), Flexbox încearcă să înghesuie toate elementele pe o singură linie. Cu wrap, dacă elementele depășesc lățimea containerului, cele în exces trec automat pe un rând nou.