Flexbox
Layout pe o axă: justify, align, gap, flex: 1 și rețete de zi cu zi.
Actualizat
Ce este Flexbox
Flexbox e un sistem de layout pe o singură axă: aranjezi copiii unui element pe un rând sau pe o coloană, controlezi spațiul dintre ei și alinierea. Îl activezi pe părinte:
.toolbar { display: flex; }Din acel moment, copiii direcți devin flex items.
Cele două axe
flex-direction: row (implicit) |
flex-direction: column |
|
|---|---|---|
| Axa principală | orizontală → | verticală ↓ |
| Axa secundară | verticală | orizontală |
Totul se raportează la axe, nu la „stânga/sus”:
justify-content— aliniere pe axa principală.align-items— aliniere pe axa secundară.
Proprietăți pe părinte
| Proprietate | Valori uzuale | Efect |
|---|---|---|
flex-direction |
row, column |
direcția |
justify-content |
flex-start, center, space-between, flex-end |
distribuie pe axa principală |
align-items |
stretch (implicit), center, flex-start, baseline |
aliniază pe axa secundară |
gap |
1rem |
spațiu între copii |
flex-wrap |
nowrap (implicit), wrap |
trec pe rândul următor când nu încap |
Proprietăți pe copii
.item { flex: 1; } /* ocupă în mod egal spațiul rămas */
.search { flex: 1; min-width: 0; } /* crește, dar se poate și micșora */
.logo { flex-shrink: 0; } /* nu se micșorează niciodată */
.last { margin-left: auto; } /* împinge elementul la capăt */flex e prescurtarea pentru flex-grow flex-shrink flex-basis:
| Valoare | Înseamnă | Când |
|---|---|---|
flex: 1 |
crește și se micșorează, bază 0 | coloane egale, input care umple rândul |
flex: none |
dimensiune fixă | icon, avatar, buton |
flex: auto |
crește pornind de la mărimea conținutului | tab-uri de lățimi diferite |
Rețete de zi cu zi
/* centrare perfectă */
.center { display: flex; justify-content: center; align-items: center; }
/* header: logo stânga, meniu dreapta */
.header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* card cu footer lipit jos */
.card { display: flex; flex-direction: column; }
.card footer { margin-top: auto; }Flexbox sau Grid?
| Flexbox | Grid |
|---|---|
| o dimensiune — rând SAU coloană | două dimensiuni — rânduri ȘI coloane |
| conținutul dictează mărimea | layout-ul dictează mărimea |
| navbar, toolbar, butoane, centrare | pagini, galerii, dashboard, formulare aliniate |
Des le combini: grid pentru pagină, flex în interiorul cardurilor.
Greșeala clasică
Text lung într-un flex item care nu se micșorează: copiii au implicit min-width: auto. Soluția: min-width: 0 pe item (sau overflow: hidden).
Pe scurt
display: flexpe părinte; copiii se aranjează pe o axă.justify-content= axa principală,align-items= axa secundară.gappentru spațiere,flex: 1pentru a umple spațiul.