.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }Acțiunile rămân grupate, se pot împacheta și nu ies din container.
LECȚIA 60 DIN 100
Construiește o bară de acțiuni flexibilă
Combină Flexbox, împachetarea, spațiul și alinierea într-o componentă responsive.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
O bară de acțiuni robustă păstrează ordinea HTML, permite rânduri noi pe ecrane înguste și distribuie un spațiu uniform. justify-content: flex-end grupează acțiunile la capătul axei principale fără poziționare absolută.
.actions { display: block; flex-wrap: nowrap; gap: 0; justify-content: flex-start; }Fără container flex, proprietățile Flexbox nu construiesc componenta responsive cerută.
PASUL 2 · APLICĂ
Exercițiul tău
Completează cele patru declarații pentru o bară flex care se împachetează, are gap 12px și se aliniază la final.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Bara este container flex.
- ○Acțiunile pot continua pe o linie nouă.
- ○Acțiunile sunt separate cu 12px.
- ○Grupul este aliniat la capătul axei principale.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
display activează Flexbox, wrap permite linii noi, gap separă acțiunile, iar justify-content controlează grupul pe axa principală.