Layout si Spatiere

In CSS, fiecare element HTML este tratat ca o cutie dreptunghiulara. Acest concept fundamental se numeste CSS Box Model (Modelul Cutiei) si este cheia pentru a intelege cum se pozitioneaza si dimensioneaza elementele pe o pagina web. Indiferent ca este un paragraf, o imagine sau un buton, browserul il vede ca o cutie cu patru straturi.

Cele patru straturi ale Box Model sunt, de la interior spre exterior:

• Content (continut) - zona unde apare textul sau imaginea, nucleul cutiei
• Padding (umplutura) - spatiul transparent dintre continut si chenar
• Border (chenar) - linia vizibila care inconjoara elementul
• Margin (margine) - spatiul transparent din afara chenarului, care separa elementul de vecinii sai

Gandeste-te la un tablou inramat pe perete. Content este pictura in sine. Padding este passepartout-ul (cartonul alb dintre pictura si rama). Border este rama tabloului. Margin este spatiul dintre rama si alte tablouri sau perete. Fiecare strat are un rol diferit si il poti controla independent prin CSS.

/* Exemplu complet de Box Model */
.cutie {
  width: 200px;          /* latimea continutului */
  padding: 20px;         /* 20px spatiu interior */
  border: 2px solid blue; /* chenar albastru de 2px */
  margin: 15px;          /* 15px spatiu exterior */
}
/* Latimea totala = 200 + 20*2 + 2*2 + 15*2 = 274px */

Un aspect important: latimea totala a unui element nu este doar valoarea width ! Browserul aduna automat padding-ul, border-ul si margin-ul la latimea continutului. In exemplul de mai sus, desi am setat width: 200px , cutia ocupa de fapt 274px pe ecran. Aceasta este una dintre cele mai comune surse de confuzie pentru incepatori.

Pentru a simplifica calculele, poti folosi proprietatea box-sizing: border-box . Cu aceasta setare, width include si padding-ul si border-ul, nu doar continutul. Majoritatea dezvoltatorilor web profesionisti aplica aceasta regula pe toate elementele de la inceputul proiectului, folosind selectorul universal: * { box-sizing: border-box; } .

Padding si Margin sunt cele mai folosite proprietati de spatiere in CSS, dar multi incepatori le confunda. Diferenta este simpla daca iti amintesti regula: padding = interior (intre continut si chenar), margin = exterior (intre chenar si elementele vecine).

Gandeste-te la o scrisoare intr-un plic. Padding este spatiul dintre textul scrisorii si marginile plicului - cat de departe de margini este scris textul. Margin este spatiul dintre plic si alte plicuri de pe birou - cat de departe este un plic de altele. Ambele creeaza spatiu, dar in locuri diferite.

/* Padding - spatiu INTERIOR */
.card {
  padding: 20px;           /* 20px pe toate cele 4 laturi */
  padding-top: 10px;       /* doar sus */
  padding-right: 15px;     /* doar dreapta */
  padding-bottom: 10px;    /* doar jos */
  padding-left: 15px;      /* doar stanga */
  padding: 10px 15px;      /* sus/jos=10px, stanga/dreapta=15px */
}

/* Margin - spatiu EXTERIOR */
.card {
  margin: 20px;            /* 20px pe toate cele 4 laturi */
  margin: 10px auto;       /* sus/jos=10px, stanga/dreapta=auto (centrat!) */
  margin-bottom: 30px;     /* doar jos */
}

O proprietate foarte utila este margin: 0 auto; . Aceasta centreaza un element orizontal pe pagina! Valoarea auto ii spune browserului sa distribuie spatiul egal la stanga si la dreapta. Este cea mai simpla metoda de a centra un container pe pagina, dar functioneaza doar daca elementul are o latime definita ( width ).

Exista si un fenomen important numit margin collapse (colapsarea marginilor). Cand doua elemente verticale au margin-bottom si margin-top care se intalnesc, browserul nu le aduna - ia doar pe cea mai mare. De exemplu, daca un paragraf are margin-bottom: 20px si urmatorul are margin-top: 30px , spatiul dintre ele va fi 30px (nu 50px). Aceasta regula se aplica doar pe verticala, nu si pe orizontala.

Un sfat practic: cand vrei sa adaugi spatiu in jurul textului dintr-un buton sau o casuta, foloseste padding . Cand vrei sa separi doua elemente unul de altul, foloseste margin . Daca nu esti sigur care sa folosesti, intreaba-te: "Vreau spatiu IN interiorul elementului sau INTRE elemente?".

Proprietatea border adauga un chenar vizibil in jurul elementului. Este o proprietate scurta (shorthand) care combina trei valori: grosimea , stilul si culoarea chenarului, separate prin spatii.

/* Format: border: grosime stil culoare; */
.card {
  border: 2px solid black;    /* chenar negru, continuu, de 2px */
  border: 1px dashed red;     /* chenar rosu, punctat, de 1px */
  border: 3px dotted blue;    /* chenar albastru, cu puncte, de 3px */
}

/* Doar pe anumite laturi */
.card {
  border-top: 2px solid green;     /* chenar doar sus */
  border-bottom: 1px solid gray;   /* chenar doar jos */
  border-left: 4px solid blue;     /* chenar doar stanga */
}

Stilurile de chenar disponibile sunt: solid (linie continua - cel mai folosit), dashed (linie intrerupta), dotted (puncte), double (linie dubla), groove si ridge (efecte 3D) si none (fara chenar). In practica, vei folosi cel mai des solid si ocazional dashed .

Proprietatea border-radius transforma colturile ascutite in colturi rotunjite . Valoarea reprezinta raza cercului de rotunjire - cu cat este mai mare, cu atat colturile sunt mai rotunde. Este una dintre cele mai populare proprietati CSS, folosita pe butoane, carduri, imagini de profil si multe alte elemente.

.buton {
  border-radius: 8px;    /* colturi usor rotunjite */
}
.card {
  border-radius: 16px;   /* colturi mai pronuntat rotunjite */
}
.avatar {
  border-radius: 50%;    /* cerc perfect! (pe element patrat) */
}
.pastila {
  border-radius: 999px;  /* forma de pastila (pe element dreptunghiular) */
}

Un truc foarte util: border-radius: 50% transforma un element patratic intr-un cerc perfect . Aceasta tehnica este folosita universal pentru imaginile de profil (avatar) pe retele sociale. Conditia este ca elementul sa aiba latimea egala cu inaltimea. Daca elementul este dreptunghiular, border-radius: 50% creeaza o elipsa, nu un cerc.

Poti seta si raze diferite pentru fiecare colt: border-radius: 10px 20px 30px 40px (in ordinea: stanga-sus, dreapta-sus, dreapta-jos, stanga-jos - in sensul acelor de ceasornic). Aceasta tehnica este utila pentru forme creative, de exemplu un element cu doar un colt rotunjit.

Flexbox (Flexible Box Layout) este cel mai popular si mai usor de folosit sistem de layout din CSS modern. Inainte de Flexbox, aranjarea elementelor pe orizontala era extrem de dificila si necesita trucuri complicate. Flexbox a rezolvat aceasta problema elegant: aplici o singura proprietate si elementele se aliniaza automat.

Flexbox se activeaza cu display: flex; pe elementul parinte (containerul). Elementele din interior (copiii) devin automat "flex items" si se aranjeaza pe un rand orizontal. Este ca si cum ai pune obiecte pe un raft: raftul este containerul flex, iar obiectele sunt flex items.

/* HTML */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS */
.container {
  display: flex;  /* Activeaza Flexbox! */
}
/* Rezultat: cele 3 elemente stau pe un RAND orizontal */

Flexbox lucreaza cu doua axe : axa principala (main axis) si axa secundara (cross axis). Implicit, axa principala este orizontala (de la stanga la dreapta) si axa secundara este verticala (de sus in jos). Poti schimba directia axei principale cu proprietatea flex-direction .

Valorile pentru flex-direction sunt: row (orizontal, implicit), column (vertical), row-reverse (orizontal inversat, de la dreapta la stanga) si column-reverse (vertical inversat, de jos in sus). Cel mai des vei folosi row (implicit) si column .

Un avantaj enorm al Flexbox fata de metodele vechi este ca elementele se adapteaza automat la spatiul disponibil. Daca containerul se micsoreaza (de exemplu pe un ecran de telefon), elementele flex se pot comprima sau trece pe randul urmator. Aceasta flexibilitate este motivul pentru care Flexbox a devenit standardul pentru layout-uri responsive.

Proprietatea justify-content controleaza cum sunt distribuite elementele de-a lungul axei principale (implicit orizontala). Este una dintre cele mai folosite proprietati Flexbox si iti da control total asupra spatiului dintre elemente.

.container {
  display: flex;
  justify-content: flex-start;    /* Aliniate la stanga (implicit) */
  justify-content: center;        /* Centrate orizontal */
  justify-content: flex-end;      /* Aliniate la dreapta */
  justify-content: space-between; /* Spatiu INTRE elemente (primul si ultimul lipite de margini) */
  justify-content: space-around;  /* Spatiu egal IN JURUL fiecarui element */
  justify-content: space-evenly;  /* Spatiu PERFECT EGAL intre toate */
}

Cele mai folosite valori in practica sunt: center (pentru centrare), space-between (pentru meniuri de navigare unde primul element este la stanga si ultimul la dreapta) si flex-start (valoarea implicita, elementele la stanga).

Gandeste-te la justify-content ca la alinierea textului in Word. flex-start este ca "Align Left", center este ca "Center", flex-end este ca "Align Right", iar space-between este ca "Justify" (text aliniat la ambele margini). Analogia nu este perfecta, dar te ajuta sa retii conceptele.

Un exemplu practic: un meniu de navigare tipic are logo-ul la stanga si link-urile la dreapta. Cu Flexbox, aceasta se face simplu: containerul are display: flex; si justify-content: space-between; . Logo-ul se duce automat la stanga, iar link-urile la dreapta, cu spatiu intre ele.

Diferenta dintre space-around si space-evenly este subtila dar importanta: space-around da fiecarui element margini egale, ceea ce inseamna ca spatiul de la marginile containerului este jumatate fata de spatiul dintre elemente. space-evenly face toate spatiile perfect egale, inclusiv cele de la margini. Pentru majoritatea situatiilor, space-evenly arata mai bine.

Daca justify-content controleaza axa principala (orizontala), align-items controleaza axa secundara (verticala). Impreuna, aceste doua proprietati iti dau control complet asupra pozitiei elementelor in container.

.container {
  display: flex;
  height: 300px;  /* containerul trebuie sa aiba inaltime! */

  align-items: stretch;     /* Elementele se intind pe toata inaltimea (implicit) */
  align-items: flex-start;  /* Aliniate sus */
  align-items: center;      /* Centrate vertical */
  align-items: flex-end;    /* Aliniate jos */
  align-items: baseline;    /* Aliniate dupa linia de baza a textului */
}

Un aspect important: align-items functioneaza vizibil doar daca containerul are o inaltime definita (prin height sau prin continut suficient). Daca containerul nu are inaltime, nu exista spatiu vertical in care sa muti elementele, deci align-items nu va avea efect vizibil.

Cea mai celebra utilizare a combinatiei justify-content si align-items este centrarea perfecta a unui element atat orizontal cat si vertical. Inainte de Flexbox, aceasta era una dintre cele mai dificile sarcini in CSS, necesitand trucuri complicate. Cu Flexbox, sunt doar 3 linii de cod:

/* Centrare PERFECTA - orizontal si vertical! */
.container {
  display: flex;
  justify-content: center;  /* centrat orizontal */
  align-items: center;      /* centrat vertical */
  height: 100vh;            /* inaltimea = tot ecranul */
}

Valoarea 100vh pentru inaltime inseamna "100% din inaltimea viewport-ului" (adica tot ecranul). Combinata cu centrarea Flexbox, aceasta tehnica este perfecta pentru pagini de tip "landing page" unde vrei un titlu mare centrat pe ecran, sau pentru pagini de login/inregistrare.

Retine aceasta regula simpla pentru a nu confunda cele doua proprietati: justify = axa principala (implicit orizontala), align = axa secundara (implicit verticala). Daca schimbi flex-direction in column , axele se inverseaza: justify controleaza verticala, iar align controleaza orizontala.

Proprietatea gap este modul cel mai simplu si curat de a adauga spatiu intre elementele flex. Inainte de gap , trebuia sa folosesti margin pe fiecare element copil, ceea ce era complicat si creea spatiu nedorit la margini. Cu gap , aplici o singura proprietate pe container si spatiul apare automat doar intre elemente.

.container {
  display: flex;
  gap: 20px;       /* 20px spatiu intre TOATE elementele */
  gap: 10px 20px;  /* 10px pe verticala, 20px pe orizontala */
}

/* Alternativa veche (mai complicata): */
.item {
  margin-right: 20px;  /* spatiu dreapta */
}
.item:last-child {
  margin-right: 0;     /* sterge marginea de pe ultimul element */
}
/* Cu gap, nu mai ai nevoie de trucul :last-child! */

Avantajul major al gap fata de margin este ca gap adauga spatiu doar intre elemente , nu si la marginile containerului. Cu margin , trebuia sa te ocupi separat de primul si ultimul element pentru a elimina spatiul suplimentar. Cu gap , totul se face automat.

Poti folosi si variantele specifice: row-gap (spatiu pe orizontala) si column-gap (spatiu pe verticala). Acestea sunt utile cand vrei spatii diferite pe cele doua axe. De exemplu, intr-o galerie de imagini, s-ar putea sa vrei mai mult spatiu pe verticala decat pe orizontala.

Proprietatea gap functioneaza nu doar cu Flexbox, ci si cu CSS Grid (un alt sistem de layout pe care il vei invata mai tarziu). Odata ce te obisnuiesti cu gap , nu vei mai vrea sa te intorci la metoda veche cu margin. Este una dintre acele proprietati CSS care, odata invatata, devine indispensabila.

Un sfat practic: valorile comune pentru gap sunt: 8px sau 10px pentru spatiere mica (intre butoane mici), 16px sau 20px pentru spatiere medie (intre carduri) si 32px sau 40px pentru spatiere mare (intre sectiuni). Pastreaza consistenta - foloseste aceleasi valori de gap in tot proiectul.

Implicit, Flexbox incearca sa puna toate elementele pe un singur rand , chiar daca nu incap. Elementele se comprima pentru a se potrivi, ceea ce poate duce la un aspect stramb. Proprietatea flex-wrap rezolva aceasta problema, permitand elementelor sa treaca pe randul urmator cand nu mai incap.

.container {
  display: flex;
  flex-wrap: nowrap;  /* Implicit - toate pe un rand (se comprima) */
  flex-wrap: wrap;    /* Trec pe randul urmator cand nu incap */
}

/* Exemplu practic: galerie de imagini */
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.galerie img {
  width: 200px;
  height: 200px;
}
/* Imaginile se aranjeaza automat pe cate randuri e nevoie! */

Gandeste-te la flex-wrap ca la textul dintr-un paragraf. Cand cuvintele nu mai incap pe un rand, ele trec automat pe randul urmator (word wrap). La fel, cu flex-wrap: wrap , elementele flex trec pe randul urmator cand nu mai incap pe randul curent.

flex-wrap: wrap este esential pentru design responsive . Pe un ecran lat de desktop, elementele incap pe un singur rand. Pe un ecran ingust de telefon, ele trec automat pe mai multe randuri. Nu trebuie sa scrii cod diferit pentru fiecare dimensiune de ecran - Flexbox se adapteaza singur!

Un exemplu clasic: un meniu de navigare cu 6 link-uri. Pe desktop, toate cele 6 stau pe un rand. Pe tableta, incap 4 pe primul rand si 2 pe al doilea. Pe telefon, cate 2-3 pe fiecare rand. Toate aceste adaptari se fac automat cu flex-wrap: wrap .

Cand folosesti flex-wrap: wrap , proprietatea align-content devine relevanta - aceasta controleaza cum sunt distribuite randurile pe axa secundara. Valorile sunt similare cu justify-content : flex-start , center , flex-end , space-between , space-around . Este diferita de align-items care aliniaza elementele in cadrul unui singur rand.

In CSS exista mai multe unitati de masura pe care le poti folosi pentru dimensiuni si spatieri. Fiecare are avantajele ei si se preteaza la situatii diferite. Intelegerea unitatilor este esentiala pentru a crea layout-uri care arata bine pe toate dimensiunile de ecran.

• px (pixeli) - unitate fixa, nu se schimba in functie de ecran. width: 300px; = mereu 300 pixeli
• % (procent) - relativa la elementul parinte. width: 50%; = jumatate din latimea parintelui
• vh (viewport height) - procent din inaltimea ferestrei. height: 100vh; = toata inaltimea ecranului
• vw (viewport width) - procent din latimea ferestrei. width: 50vw; = jumatate din latimea ecranului
• rem - relativa la font-size-ul elementului root (html). 1rem = de obicei 16px

/* Pixeli - dimensiune fixa */
.sidebar { width: 250px; }

/* Procente - relativ la parinte */
.main-content { width: 75%; }

/* Viewport - relativ la ecran */
.hero-section { height: 100vh; }  /* ocupa tot ecranul */
.half-screen { width: 50vw; }     /* jumatate din ecran */

/* Rem - relativ la font root */
.card { padding: 1.5rem; margin-bottom: 2rem; }

Regula practica: foloseste px pentru lucruri care trebuie sa ramana mereu la aceeasi dimensiune (de exemplu, grosimea unui chenar: border: 2px ). Foloseste % si rem pentru layout-uri responsive care se adapteaza la ecran. Foloseste vh si vw pentru sectiuni care trebuie sa ocupe o proportie din ecran.

Un sfat important: evita sa folosesti doar px pentru layout. Un element cu width: 800px va fi prea lat pe un telefon cu ecran de 375px si va crea o bara de scroll orizontala nedorita. In schimb, width: 90% sau max-width: 800px se adapteaza la ecran.

Proprietatea max-width este foarte utila: seteaza o latime maxima dar permite elementului sa fie mai ingust daca ecranul este mic. De exemplu, max-width: 800px; width: 100%; inseamna "ocupa toata latimea disponibila, dar nu mai mult de 800px". Aceasta combinatie este folosita pe aproape fiecare site web modern pentru containerul principal al continutului.

Acum ca ai invatat toate componentele, iata cateva layout-uri practice pe care le vei folosi frecvent in proiectele tale. Aceste sabloane acopera cele mai comune nevoi de aranjare a elementelor pe o pagina web.

1. Meniu de navigare orizontal:

.navbar {
  display: flex;
  justify-content: space-between;  /* logo stanga, linkuri dreapta */
  align-items: center;             /* aliniate vertical */
  padding: 10px 20px;
  background: #333;
}

2. Galerie de carduri responsive:

.card-grid {
  display: flex;
  flex-wrap: wrap;       /* trec pe rand nou */
  gap: 20px;             /* spatiu intre carduri */
  justify-content: center;
}
.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

3. Footer cu coloane:

.footer {
  display: flex;
  justify-content: space-around;  /* coloane distribuite egal */
  flex-wrap: wrap;                /* responsive pe mobil */
  padding: 40px 20px;
  gap: 20px;
}

Aceste trei sabloane acopera majoritatea nevoilor unui site web simplu. Meniul de navigare apare pe fiecare pagina, cardurile sunt folosite pentru prezentarea produselor, articolelor sau serviciilor, iar footer-ul cu coloane este standard pe majoritatea site-urilor.

Un instrument extrem de util pentru a exersa Flexbox este site-ul Flexbox Froggy (flexboxfroggy.com) - un joc interactiv gratuit in care muti broscute pe nuferi folosind proprietati Flexbox. Este distractiv si educativ in acelasi timp. Alt instrument util este CSS Tricks - A Complete Guide to Flexbox , o pagina de referinta cu diagrame vizuale pentru fiecare proprietate.

Retine regula celor trei proprietati esentiale pe care le vei folosi in 90% din cazuri: display: flex; (activeaza Flexbox), justify-content (alinierea pe orizontala) si align-items (alinierea pe verticala). Cu doar aceste trei proprietati poti rezolva majoritatea problemelor de layout. Adauga gap pentru spatiere si flex-wrap: wrap pentru responsivitate, si ai un set complet de instrumente pentru layout-uri profesionale.