Flexbox și Grid sunt două tehnici puternice de dispunere a elementelor în CSS, folosite pentru a crea layout-uri complexe și responsive într-un mod ușor și eficient.

În această lecție, vei învăța:
✅ Flexbox – Cum să aliniezi și să distribui elementele pe o axă flexibilă.
✅ Grid – Cum să creezi layout-uri pe 2 dimensiuni (rânduri și coloane).
✅ Cum să combini Flexbox și Grid pentru design-uri moderne și responsive.

1. Flexbox: O Introducere

Flexbox este ideal pentru aranjarea elementelor pe o singură axă (orizontală sau verticală). Este utilizat frecvent pentru:

• Meniuri de navigare
• Galerii de imagini
• Alinierea elementelor (centrare verticală și orizontală)

---

1.1. Cum Funcționează Flexbox

În Flexbox, avem două componente principale:
🔹 Container Flex – Elementul părinte care conține elementele flexibile.
🔹 Elemente Flex – Elementele din interiorul containerului care sunt aranjate flexibil.

Exemplu HTML:

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

CSS de Bază:

.container {
    display: flex;
    border: 2px solid #333;
}

.item {
    background-color: #007bff;
    color: white;
    padding: 20px;
    margin: 5px;
}

1.2. Direcția Elementelor Flex

🔸 flex-direction controlează direcția elementelor flexibile:

• row (implicit): pe orizontală (de la stânga la dreapta)
• row-reverse: pe orizontală (de la dreapta la stânga)
• column: pe verticală (de sus în jos)
• column-reverse: pe verticală (de jos în sus)

Exemplu:

.container {
    display: flex;
    flex-direction: row;
}

1.3. Alinierea Elementelor cu Flexbox

1.3.1. Aliniere pe axa principală (justify-content)

🔸 justify-content controlează distribuția spațiului pe axa principală:

• flex-start (implicit) – la începutul containerului
• flex-end – la sfârșitul containerului
• center – centrate
• space-between – spațiu egal între elemente
• space-around – spațiu egal în jurul fiecărui element

Exemplu:

.container {
    display: flex;
    justify-content: center;
}

1.3.2. Aliniere pe axa transversală (align-items)

🔸 align-items controlează alinierea pe axa transversală:

• stretch (implicit) – elementele se întind pentru a umple spațiul
• flex-start – aliniate sus
• flex-end – aliniate jos
• center – aliniate pe mijloc

Exemplu:

.container {
    display: flex;
    align-items: center;
}

1.4. Flex Wrap și Ordinea Elementelor

1.4.1. Flex Wrap

🔸 flex-wrap permite elementelor să treacă pe un rând nou când nu mai încap pe linia curentă:

• nowrap (implicit) – toate elementele pe un singur rând
• wrap – elementele se împachetează pe mai multe rânduri

Exemplu:

.container {
    display: flex;
    flex-wrap: wrap;
}

1.4.2. Ordinea Elementelor

🔸 order schimbă ordinea afișării elementelor:

.item:nth-child(2) {
    order: -1; /* Acest element va apărea primul */
}

2. CSS Grid: O Introducere

CSS Grid este o tehnică de layout bidimensională (rânduri și coloane). Este ideală pentru:

• Layout-uri complexe (pagini întregi)
• Galerii de imagini
• Dashboard-uri

---

2.1. Cum Funcționează Grid

🔹 Container Grid – Elementul părinte care definește grila.
🔹 Elemente Grid – Elementele copil care se aliniază pe grilă.

Exemplu HTML:

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

CSS de Bază:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-item {
    background-color: #28a745;
    color: white;
    padding: 20px;
}

2.2. Definirea Coloanelor și Rândurilor

🔸 grid-template-columns și grid-template-rows definesc structura grilei:

• repeat() – repetă coloane/rânduri de un anumit număr de ori
• 1fr – împarte spațiul disponibil în mod egal

Exemplu:

.grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px 200px;
}

2.3. Poziționarea Elementelor în Grid

🔸 grid-column și grid-row controlează poziționarea:

.grid-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

3. Combinarea Flexbox și Grid

Flexbox este ideal pentru aliniere și dispunere pe o singură axă, iar Grid pentru layout-uri complexe. Le poți combina pentru a crea pagini web moderne și responsive.

---

4. Activitate Practică

🎯 Exercițiu 1: Creează un layout de carduri responsive folosind Flexbox.
🎯 Exercițiu 2: Construiește o pagină de tip galerie folosind Grid.
🎯 Exercițiu 3: Combină Flexbox și Grid pentru un layout de pagină complet.

---

5. Quiz pentru Săptămâna 4

1️⃣ Care proprietate Flexbox distribuie spațiul pe axa principală?

• a) justify-content
• b) align-items
• c) flex-wrap

2️⃣ Care proprietate Grid definește numărul de coloane?

• a) grid-template-columns
• b) grid-template-rows
• c) grid-gap